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を使ってみたよ！

1. update
2. begin & complete

update

アニメーションを開始すると同時に、全てのフレームでコールバックがトリガーされます。
引用元：https://tr.you84815.space/animejs/callback-promises.html


  anime({
  targets: '#update .el',//ターゲットの設定
  translateX: 500,//動き
  rotate: 180,　//回転
  delay: 1000,//実行遅延
  borderRadius: ['0%', '50%'],
  easing: 'easeOutBounce',//イージングの設定
  update: function(anim) {
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
  }
})

anime({

targets: '#update .el',//ターゲットの設定

translateX: 500,//動き

rotate: 180,　//回転

delay: 1000,//実行遅延

borderRadius: ['0%', '50%'],

easing: 'easeOutBounce',//イージングの設定

update: function(anim) {

progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';

}

})

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

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

https://easings.net/ja

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

begin & complete

begin()は、アニメーション開始時に一度だけ呼び出されます。
complete()は、アニメーション終了時に一度だけ呼び出されます。
引用元： https://tr.you84815.space/animejs/callback-promises.html


begin: function(anim) {
     progressText.innerHTML = "start!";
  },
complete: function(anim) {  
    progressText.innerHTML = "completed!";
  }

begin: function(anim) {

progressText.innerHTML = "start!";

complete: function(anim) {

progressText.innerHTML = "completed!";

}

この部分です。

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

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

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

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

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

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

皆さんもぜひ試してみてください（＾＾）

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

公式サイト

<あわせて読みたい>

anime.jsでripple effect(波紋効果)を作ってみたよ

anime.jsの公式サイトに載っているgrid、ripple effectをデモで作成した内容です。