実現したいこと

スライドアニメーションで図形を斜めに移動させ、移動中に図形をクリックしても２重処理が起こらないようにflagで制御したい。

前提

JavaScriptでアニメーションの練習をしておりますが、斜めに移動させる座標指定の方法がわからず困っています。また、アニメーション中に図形をクリックすると元の位置に戻りカクカクとした動きになってしまいます。flagの処理を行いアニメーション中にクリックしても綺麗に最後まで動くようにしたいです。
図形は右に500px、下に400px動かしたいです。CSSのtransitionを使わずjavascriptのみで行いたいです。記述しているslideAnimation関数を使った形で作りたいと思っております。

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson02 アニメーション1</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="wrapper"> <button onclick="reset()">リセット</button> <div id="box"> <p>box</p> </div> </div>

<script>
const element = document.getElementById("box");    
element.onclick = function(){
    let flag = false;
    if(flag){
        flg = false;
    }else{
        flag=true;
    }
    function slideAnimation(element,direction,distance,duration) {
        let position = 0;
        function slide(){
            position += 1;
            if (position < distance){
                if (direction === "left"){
                    element.style.transform = `translateX(${-position}px)`;
                }
                else if (direction === "right"){
                    element.style.transform = `translateX(${position}px)`;
                }
                else if (direction === "up"){
                    element.style.transform = `translateY(${-position}px)`;
                }
                else if (direction === "down"){
                    element.style.transform = `translateY(${position}px)`;
                }
               
            }else{
                clearInterval(slide);
            }
        }
        setInterval(slide,duration);
    }
    
    slideAnimation(element,"right",300,2);

}

    function reset() {
        document.getElementById("box")
        element.style.transform="translate(0)"
    }
 
    
</script>

</body> </html>

#box {
width: 320px;
height: 180px;
background-color: #fdd;
cursor: pointer;
}

#box p {
line-height: 180px;
font-size: 32px;
text-align: center;
}

試したこと

onclick 関数の中にflagを記入してみましたがうまく動きません。

yambejp

2023/09/01 00:23

markdownがおかしく表示が崩れています、修正お願いします

行動規範の内容に同意します

回答2件

斜めに移動させる座標指定の方法がわからず困っています

Y 軸と X 軸の変換の組み合わせ | translate() - CSS: カスケーディングスタイルシート | MDN

移動中に図形をクリックしても２重処理が起こらないようにflagで制御したい

フラグで管理するのは、移動中か否かという状態だと思いますので、アニメーション開始と同時にフラグを立ててアニメーション停止と同時にフラグを降ろし、クリックイベントのハンドラの冒頭でフラグをチェックして立っていたら何もしない、というのがいいかと思います。
なお、現在のスコープだと狭いので、ハンドラの外に出すべきです。

js
1let flag = false; // 外に出す
2element.onclick = function () {
3    if (flag) return; // フラグが立っていたら何もしない
4    function slideAnimation(element, direction, distance, duration) {
5        flag = true; // アニメーション開始時にフラグを立てる
6
7//...
8
9                clearInterval(slide);
10                flag = false; // アニメーション終了時にフラグを下す。
11
12//...

clearInterval の使い方もおかしいですね。

clearInterval() - Web API | MDN

投稿2023/09/01 01:07

編集2023/09/01 01:19

Lhankor_Mhy

総合スコア37437

ベストアンサー

jsのsetIntervalでやる処理ではないですね。タイミングがあわせられないです。
とはいえ以下のような感じでフラグもカスタムデータとかでよいかと

javascript
1<style>
2#box {
3width: 320px;
4height: 180px;
5background-color: #fdd;
6cursor: pointer;
7}
8
9#box p {
10line-height: 180px;
11font-size: 32px;
12text-align: center;
13}
14</style>
15<script>
16function slideAnimation(element,distance,duration){
17  let timerId;
18  let counter=0;
19  const speed=10;
20  const slide=()=>{
21    const x= parseInt(distance[0] * counter / duration);
22    const y= parseInt(distance[1] * counter / duration);
23    const trans=`translateX(${x}px) translateY(${y}px)`;
24    element.style.transform = trans;
25    if(counter>=duration) clearInterval(timerId);
26    counter+=speed;
27  }
28  timerId=setInterval(slide,speed);
29}
30function reset(){
31  box.style.transform = `translate(0)`;
32  delete(box.dataset.active);
33}
34document.addEventListener('click',({target})=>{
35  if(target.closest('#box:not([data-active])')){
36    box.dataset.active="1";
37    slideAnimation(box,[500,400],2000);
38  }  
39});  
40</script>
41<div id="wrapper">
42<button onclick="reset()">リセット</button>
43<div id="box">
44<p>box</p>
45</div><!-- box -->
46</div><!-- wrapper -->

参考

一応cssで指定しないkeyframeアニメーションのサンプルです

javascript
1<style>
2#box {
3width: 320px;
4height: 180px;
5background-color: #fdd;
6cursor: pointer;
7}
8
9#box p {
10line-height: 180px;
11font-size: 32px;
12text-align: center;
13}
14</style>
15<script>
16let myAnime=new Animation();
17function slideAnimation(element,distances,duration,fill="none"){
18  const myKeyframe= new KeyframeEffect(
19    element,
20    [
21      {transform: "translate(0px,0px)",backgroundColor:"red"},
22      {transform: `translate(${distances[0]}px,${distances[1]}px)` ,backgroundColor:"blue"},
23      ],
24    {duration,fill},
25    );
26  myAnime = new Animation(myKeyframe,document.timeline);
27  //myAnime.addEventListener('finish',()=>delete(element.dataset.active));
28};
29function reset(){
30  delete(box.dataset.active);
31  myAnime.cancel();  
32}
33document.addEventListener('click',({target})=>{
34  if(target.closest('#box:not([data-active])')){
35    slideAnimation(box,[500,400],2000,'forwards');
36    box.dataset.active="1";
37    myAnime.play();
38  }  
39});  
40</script>
41<div id="wrapper">
42<button onclick="reset()">リセット</button>
43<div id="box">
44<p>box</p>
45</div><!-- box -->
46</div><!-- wrapper -->