BETA

anime.jsをループ内で使う際の小技

投稿日:2020-03-29
最終更新:2020-03-29

anime.jsで変化させた要素をアニメーション終了後に戻す

anime.jsを使ってアニメーションを表示させるとtranslateやrotateの値が変化したままでそのあと続けてアニメーションを表示させるとおかしな挙動になる。そこでcallback関数を用いて以下のようにアニメーション終了後に値を戻せばその後のアニメーションも正しい挙動になる。

var target = document.getElementById("target");  
anime({  
    targets: target,  
    translateX: 100,  
    duration: 200,  
    complete: function(anim){ //callback関数  
        anime.set(target, {  
            translateX:0  
        });  
    }  
});  

#ループ内での場合
しかし、forループやwhileループで以下のようにすると想定通りには動かない。

for(target of targets){  
    anime({  
        targets: target,  
        translateX: 100,  
        duration: 200,  
        complete: function(anim){  
            anime.set(target, {  
                translateX:0  
            })  
        }  
    });  
}  

これはcallback関数がforループの終了後に行われていてtargetsリストの一番最後の要素だけにしかcallback関数が適用されないからである。
そこで以下のようanimeオブジェクトからtargetを直接とるとうまくいく。

for(target of targets){  
    anime({  
        targets: target,  
        translateX: 100,  
        duration: 200,  
        complete: function(anim){  
            anime.set(anim.animatables[0].target, {  
                translateX:0  
            })  
        }  
    });  
}  

callback関数は第一引数にanimeオブジェクトをとれるので使用し(thisでも可能)anim.animatables[0].targetでアニメーションオブジェクトからtargetをとってこれる。
anime.jsのanimeオブジェクトはtarget以外にも終了時のイベントやアニメーション進行度合いなどさまざまな要素を含んでいるのでうまく利用するとアニメーションを工夫できる。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

https://banatech.net のクロスサイト

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう