p5.js と Tween24.js を組み合わせたお試し：イージングのブレンド【完走賞ゲット-13】

※ Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です

この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 13日目の記事です。

今回の内容

今回の内容は、以下の記事の続きにあたるものです。

●p5.js と Tween24.js を組み合わせたアニメーション・イージングのお試し 【完走賞ゲット-12】 - Qiita
　https://qiita.com/youtoy/items/ad2ade71d73fa2298723

前回の記事では、まずは p5.js と組み合わせる方法を探して、簡単なサンプルで試してみました。今回はその続きで、連続したアニメーションなど前回よりは少し複雑なアニメーションを扱えそうな内容を試します。

Tween24.js とは

前回に引き続き、描画ライブラリの p5.js と組み合わせる「Tween24.js」は、メソッドチェーンでアニメーションが書けるライブラリです。

Tween24.js を使ったお試し

Tween24.js で試す機能を選定する

前回は軽いお試しだったので、今回は「Tween24.js」の特長的な部分を試せればと思います。

イージングの機能はよく使いそうなところかな、と思ってそのあたりを見ていくと、「カスタマイズ」「ブレンド」といった便利そうな仕組みがありました。

それらの中でもブレンドは、自分にとっては活用しどころがたくさんありそうでした。
そこで、このイージングのブレンドを実際に試してみようと思います。

イージングのブレンドの処理

イージングのブレンドについて、公式の記事内の記載を見てみます。

// Ease24._Blend(イージングA, イージングB, AからBへの変化量)
const blendEasing = Ease24._Blend(Ease24._6_ExpoIn, Ease24._BounceOut, Ease24._6_ExpoInOut);
Tween24.tween("#box1", 1, blendEasing)...

Ease24._Blend() で、ブレンドしたい複数のイージングを指定するようです。
さらに、そのブレンドした内容を、Tween24.tween() の第三引数（イージングの種類を指定する部分）で使ってやれば良いようです。

イージングのブレンドを p5.js と組み合わせる

公式のサンプルを、p5.js と組み合わせて試してみました。

まず実行結果を掲載してみます。

見た感じ、異なる複数のイージングが適用されているように見えます。

具体的な実装内容は、以下のとおりです。

let tweenData, tween;

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

  tweenData = { progress: 0 };

  const blendEasing = Ease24._Blend(
    Ease24._6_ExpoIn,
    Ease24._BounceOut,
    Ease24._6_ExpoInOut
  );

  tween = Tween24.tween(tweenData, 1, blendEasing, { progress: 1 });
}

function draw() {
  background(220);

  const x = tweenData.progress * width;
  circle(x, height / 2, 100);
}

function mouseClicked() {
  tween.play();
}

おわりに

今回、Tween24.js を使ったイージングを p5.js と組み合わせて使ってみました。
単純なイージングは前回の記事を書いた時に試していたのですが、今回はイージングをブレンドする機能を試してみました。

動きの中に複数のイージングを簡単に含められる処理は、使いどころがいろいろありそうです。