Anime.jsのコールバック、update、begin、completeを使ったアニメーション

Anime.jsのコールバック、update、begin、completeを使ったアニメーション

こんにちは!

プログラム学習中のdynaです。


この記事は軽量な Anime.jsを使用して、アニメーションをつけてみた記録になります。 

基本的には公式サイトを翻訳(Google先生)、日本語のサイトを見て作成しています。


今回のデモはこちら↓ 終わったら右下のRerunを押して下さい。

※スマホの方は下の0.5ボタンを押してからご覧ください

See the Pen anime.js uptate by dyna (@sakudyna) on CodePen.


update、begin、completeを使ってみたよ!


update

アニメーションを開始すると同時に、全てのフレームでコールバックがトリガーされます。

引用元:https://tr.you84815.space/animejs/callback-promises.html

 

 

updateでは%の部分を表示しています。

ちなみに、easingでは、このサイトが参考になります。

https://easings.net/ja

絵があって動きが分かりやすい!!


begin & complete

begin()は、アニメーション開始時に一度だけ呼び出されます。

complete()は、アニメーション終了時に一度だけ呼び出されます。

引用元: https://tr.you84815.space/animejs/callback-promises.html

 


この部分です。

今回は、beginで「start!」、conpleteで「conpleted!」と表示させています。

function(anim){ ~実行したい処理 }で使用できます。


なんかこれ使えば色々できそうですね。

面白いの思いついたら試してみたいと思います。



まだ簡単なものしか使えてませんが、サクッと作れて便利だなーと思います。

作ったものが動くのって楽しい!!

 

皆さんもぜひ試してみてください(^^)

 

anime.jsのDLなどはこちら↓

公式サイト

 

<あわせて読みたい>