Q&A
ソース全体を上下```で囲んでマークダウンしてください
中途半端なソース表示になって判断がしづらいです
それと今回の命題だとスタイルシートの提示も必要です
実現したいこと
クリックしたら２秒かけて斜めに動き、右に500px、下に300pxの位置に動かす。
アニメーション中にクリックしても二重動作が起こらないように制御する。
リセットボタンを押すと、元の位置に戻る。という仕組みを作りたいです。
前提
html、css、JavaScriptを用いて、ウェブエンジニアになるに向けて勉強しております。
いまだに、理解力が乏しいので、わかりやすいコードでご教授いただけると助かります。
注意点としては、CSSのtansitionを使用せず、JavaScriptのみで記載すること。
ヒントとして、setInterval、clearIntervalとあります。
発生している問題・エラーメッセージ
index.html:44 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
index.html:11 Uncaught ReferenceError: reset is not defined
at HTMLButtonElement.onclick
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>lesson02 アニメーション1</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7</head> 8<html> 9<body> 10 <div id="wrapper"> 11 <button onclick="reset()">リセット</button> 12 <div id="box"> 13 <p>box</p> 14 </div><!-- box --> 15 </div><!-- wrapper --> 16 17 <script> 18 function slideAnimation(target, moveX, moveY, duration) { // スライドアニメーションを申請する 19 if(target.getAttribute("animating") !== null) return; // アニメーション中なら何もしない 20 target.setAttribute("animating", ""); // 要素がアニメーション中であることを表す 21 const startTime = performance.now(); // アニメーションを開始した時間を保存 22 const intervalId = setInterval(slide, 1000 / 60); // 1秒/60フレーム=60fpsでslide関数を実行 23 function slide() { // 経過時間に合わせて位置を変更する 24 const nowTime = performance.now(); // 今の時間を保存 25 const diffTime = nowTime - startTime; // 経過時間を保存 26 if(diffTime >= duration) { // 経過時間がduration以上なら 27 translate(target, moveX, moveY); // スライドの最後の状態にする（位置ズレ解消のため） 28 target.removeAttribute("animating", ""); // 要素がアニメーション中でないことを表す 29 clearInterval(intervalId); // インターバルを削除 30 return; 31 } 32 const nowX = (moveX / duration) * diffTime, // 現在いるべきx座標を表す 33 nowY = (moveY / duration) * diffTime; // 現在いるべきy座標を表す 34 translate(target, nowX, nowY); // 現在いるべき座標の状態にする 35 } 36} 37function translate(target, x, y) { // 位置をずらすための関数 38 target.style.transform = `translate(${x}px, ${y}px)`; 39} 40 41document.querySelector("#box").addEventListener("click", e => { 42 slideAnimation(e.currentTarget, 500, 300, 2000); // #boxを右に500px下に300pxを2000ミリ秒かけてスライドさせる 43}); 44document.querySelector("reset").addEventListener("click", () => { 45 translate(box, 0, 0); // #boxの位置をリセットする 46}); 47 </script> 48</body> 49</html>
申し訳ございません。
再度質問しなおします。
コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。
回答2件
0
ベストアンサー
HTML要素の移動アニメはCSSのtranslateなどでやると楽です
クラスのつけ外しであれば移動中にクリックしても二重処理は走りません
javascript
1<style> 2#box{ 3width:800px; 4height:600px; 5background-Color:gray; 6} 7#box p{ 8width:100px; 9height:100px; 10background-Color:red; 11} 12.move{ 13transition:translate 2s; 14translate:500px 300px; 15} 16</style> 17<script> 18document.addEventListener('click',({target})=>{ 19 if(target.matches('#box p')){ 20 target.classList.add('move'); 21 } 22 if(target.matches('#reset')){ 23 document.querySelector('#box p').classList.remove('move'); 24 } 25}); 26</script> 27 28<div id="wrapper"> 29<button id="reset">リセット</button> 30<div id="box"> 31<p>box</p> 32</div> 33</div>
transitionを使わない場合
仮にtransitionを使わないとしてどこまで使って良いのか・・・
translateはよいのか、absoluteしてtop/leftにするのか、margin-top/margin-leftならいいのか仕様調整が必要ですね
（課題であればこの辺の選択がセンスを試されるのでしょう）
移動中にリセットボタンを押した場合の挙動をどうするかなど課題はあります
またsetIntervalでは厳密な2秒の計測は難しく終了タイミングは2秒をちょっと超えます。
それとsetIntevalで単純に時間を分割して処理する場合スピードが一定になってしまうので、
加速度処理などを検討する場合はCSSに任せたほうが楽です。
javascript
1<style> 2#box{ 3width:800px; 4height:600px; 5background-Color:gray; 6} 7#box p{ 8width:100px; 9height:100px; 10background-Color:red; 11} 12#debug{ 13position:fixed; 14top:0; 15right:0; 16} 17</style> 18<script> 19document.addEventListener('click',({target})=>{ 20 const p=document.querySelector('#box p'); 21 const msec=2000; 22 const delay=100; //nullにするとなめらか 23 const posX=500; 24 const posY=300; 25 if(target.matches('#box p:not(.move)')){ 26 p.classList.add('move'); 27 const start=new Date(); 28 const timerId=setInterval(()=>{ 29 const prog=new Date()-start; 30 debug.textContent=prog;// 経過時間を右上に表示 31 p.style.transform=`translate(${posX*prog/msec}px,${posY*prog/msec}px)`; 32 if(prog>=msec){ 33 p.style.transform=`translate(${posX}px,${posY}px)`; 34 clearInterval(timerId); 35 } 36 },delay); 37 38 } 39 if(target.matches('#reset')){ 40 p.classList.remove('move'); 41 p.style.transform='translate(0px,0px)'; 42 } 43}); 44</script> 45<div id="debug">-</div> 46<div id="wrapper"> 47<button id="reset">リセット</button> 48<div id="box"> 49<p>box</p> 50</div> 51</div>
投稿2023/12/05 13:54
編集2023/12/06 01:46総合スコア117707
お読みになっているとは思いますが、
> 注意点としては、CSSのtansitionを使用せず、JavaScriptのみで記載すること。
> ヒントとして、setInterval、clearIntervalとあります。
という記述がありますね。
同様の質問を見た記憶があります。おそらくスクールの課題か何かで、指導者として書かせたいコードがあって縛っているでしょう。
TO：Lhankor_Mhyさん
ご指摘ありがとうございます。ちゃんと読んでなかったです。失礼しました
ご回答ありがとうございます。
いただいたコードを参考に、setInterval、clearIntervalを用いて、コードを作ってみたのですが、相変わらず動いてくれません。
function slideAnimation(element, direction, distance, duration)
var position = 0;
const boxAnimation = document.getElementById("box");
function boxslideAimation(){
if(sw == 0) {
const element = document.getElementById("box");
function slideAnimation(element, direction, distance, duration) {
let position = 0;
const startTime=performance.now();;
function slide() {
position += 1;
//
if (position < distance) {
if (direction === "rightdown") {
element.style.transform = `translate(${position}px,${position}px)`;
sw = 1;
}
}else {clearInterval(slide);
}
}
setInterval(slide, duration);
}
slideAnimation(element, "rightdown", (500,300), 2000);
}else if(sw > 1) {
}
}
function styleReset(){
const boxreset = document.getElementById("box")
boxreset.style.transform = `translate(0px,0px)`;
sw = 0;
}
下記のようなエラーコードが出ます。
Uncaught SyntaxError: Unexpected token 'var
全体像がみえません
エラーの出る状態のままでいいのでどこかにソースをアップできませんか？
そちらはご自身のPCの中ですね、codepenなどに登録なさるとよいと思います。無料ですし
0
投稿2023/12/06 00:51
編集2023/12/06 00:55総合スコア37437
あなたの回答
tips
プレビュー
