p5.js と anime.js を組み合わせた Tweenアニメーション【その2：キーフレームを使ってみる】 #JavaScript

今回の内容は、「anime.js」と「p5.js」を組み合わせた Tweenアニメーションに関して書いた以下の記事の続きにあたるものです。

●p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
　https://qiita.com/youtoy/items/361282f1113d88ff5f05

具体的には、上記の記事の中のお試しでは使っていなかった、キーフレーム・タイムラインといった機能を試す話になります。

さっそく本題へ

前回の記事と同様に、今回も「p5.js Web Editor」でプログラムを作成していきます。
また、前回の記事の内容が試せているという前提ですので、p5.js Web Editor上のライブラリ設定の話など、そいうった部分は前回の記事をご参照ください。

キーフレームについて

前回の記事は、以下のようなシンプルな Tweenアニメーションを行う内容でした。

円が (100,100) という位置から (300, 250) という位置へ移動
円が移動する際に、大きさが大きくなる（パラメータ的には 50 から 150 に変化）
が移動する際に、色が明るく変化（グレースケールの値で 100 から 200 に変化）
イージングは線形な変化のもの

とある状態A から別の状態B に変化するというものです。

今回用いるキーフレームは、そのような状態を複数用意して「状態A ⇒ 状態B ⇒ 状態C ⇒ 状態D ...」という変化をさせたりする時などに便利なものです。

公式の情報を見ると、以下の「Animation Keyframes」と「Property Keyframes」というものがあるようです。
　●Documentation | anime.js　【Animation Keyframes】
　　https://animejs.com/documentation/#animationKeyframes
　●Documentation | anime.js　【Property Keyframes】
　　https://animejs.com/documentation/#propertyKeyframes

今回は Animation Keyframes のほうを利用します。

キーフレームを使ったプログラム

以下にプログラムを掲載します。

let ball,
  count = 0;

function setup() {
  createCanvas(500, 500);

  ball = {
    x: 100,
    y: 100,
    diameter: 50,
    col: 100,
  };

  anime({
    targets: ball,
    delay: 1000,
    keyframes: [
      { x: 350, y: 250, diameter: 150, duration: 2000 },
      { x: 100, y: 200, diameter: 20 },
      { x: 150, y: 150},
      { x: 450, y: 300, duration: 300 }
    ],
    easing: "linear",
    update: function () {
      console.log(count++);
    },
  });
}

function draw() {
  background(0);
  noStroke();
  fill(ball.col);
  circle(ball.x, ball.y, ball.diameter);
}

上記でポイントになるのは、以下の部分です。
初期状態では x: 100, y: 100, diameter: 50　となっていた位置・大きさが、4回変わるような設定です。

    keyframes: [
      { x: 350, y: 250, diameter: 150, duration: 2000 },
      { x: 100, y: 200, diameter: 20 },
      { x: 150, y: 150},
      { x: 450, y: 300, duration: 300 }
    ],

また、 duration はデフォルト値でない値を使いたい場合に指定します。
ここに、ミリ秒の数値を指定してやると、変化が起こるまでの時間をしていした長さにすることができます。

ちなみに、公式ドキュメントを確認すると「duration のデフォルト値」は「1000 [ミリ秒]」になっているようです。
●Documentation | anime.js　【Duration】
　https://animejs.com/documentation/#duration

なお、公式ドキュメントの情報によると、上記のキーフレームの配列の中に時間情報を書かず、その外に総合の時間だけを書く、という使い方もできるようです。
その場合、総合の時間の長さが、各キーフレームに均等に割りふられるようでした。

動作させたもの

今回のプログラムを実際に動作させた時の様子がこちらです。

update の処理

今回、プログラムの中に以下を加えています。

    update: function () {
      console.log(count++);
    },

上記の処理は、以下の公式ドキュメントの処理を試してみるために入れていたもので、今回のキーフレームの処理に必須のものではありません。
　●Documentation | anime.js　【Update】
　　https://animejs.com/documentation/#update

この関数が呼ばれる度にカウントアップする数字を出力するというのをやってみていて、どれくらいの頻度で処理が行われているかを確認しようとしたものでした（ちなみに、処理は 60fps になるようでした）。

ちなみに、公式ドキュメントの公式サンプルでは、以下のような処理が書かれていたりします。

var updates = 0;

anime({
  targets: '.update-demo .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
  update: function(anim) {
    updates++;
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

おわりに

前回の記事の内容に続いて、p5.js と anime.js の組み合わせを試してみました。
今回使ったキーフレーム以外に、試したいものでタイムラインがあります。

これについても、別途、記事を書ければと思っています。