この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 12日目の記事です。
今回の内容
今回の内容は、p5.js と Tween24.js を組み合わせて使ってみた、という話です。
Tween24.js とは
今回、描画ライブラリの p5.js と組み合わせる「Tween24.js」は、メソッドチェーンでアニメーションが書けるライブラリです。
●新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
https://ics.media/entry/210409/
●a24/tween24js: Tween24 for JavaScript
https://github.com/a24/tween24js
過去に使ったアニメーションライブラリ
過去に、自分が使ったことがあるアニメーションライブラリには、主に anime.js と p5.tween の 2つがありました。
anime.js については、以下など試した内容を Qiita の記事にも書きました。
- p5.js と anime.js を組み合わせた Tweenアニメーション【その2：キーフレームを使ってみる】 - Qiita
- p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
また、p5.tween を試した時の X のポストは、以下のとおりです。
Tween24.js を試そうと思ったきっかけ
Tween24.js自体は、上で掲載していた内容を試す前の調査で見かけていました。
そして、いつか試してみようと思っていたのですが、試すことないまま時間が流れていていたのですが、最近以下の記事を見かけて、手をつけてみようと思いました。
●Tween24.jsでアニメーションを実装してみたので解説 #虎の穴ラボ Advent Calendar 2023 - 虎の穴開発室ブログ
https://toranoana-lab.hatenablog.com/entry/2023/12/10/100000
Tween24.js を使う
p5.js と Tween24.js を組み合わせる
まずは、 p5.js と Tween24.js を簡単に組み合わせられるかを試してみます。
それを試す環境としては、Web上でコーディングと作ったものの実行が簡単に行える p5.js Web Editor を使います。
Tween24.js を読み込む
CDN から読み込めると便利かなと思って、「Tween24.js CDN」というキーワードで調べてみました。
そうすると、以下を使うと良さそうなことが分かりました。
p5.js Web Editor で簡単に試す
p5.js Web Editor上で、上記の CDN経由でのライブラリの読み込みをやってみます。
まずは簡単なコードで動作確認を行ってみます。
流用できそうな情報を探してみたところ、公式の以下が活用できそうでした。
以下のコードを実行することで、DOM を対象に指定するのではなく、パラメータを指定した処理を実現できそうです。
let tweenData, tween;
function setup() {
createCanvas(500, 400);
tweenData = { progress: 0 };
tween = Tween24.tween(tweenData, 1, Ease24._Linear, { progress: 1 });
}
function draw() {
background(220);
const x = tweenData.progress * width;
circle(x, height / 2, 100);
}
function mouseClicked() {
tween.play();
}
実際に動作をさせてみたのが以下です。
無事、画面の一方の端から他方の端へ動くのが、想定通りの動きになりました。
イージングの指定について（デフォルトの内容とそれを変更する話）
今回、上記でのイージングは Ease24._Linear を使いました。
こちらは、公式の記事を見ていると、イージングの種類を省略しても、同じ Ease24._Linear が設定されるようです。
このデフォルトで設定されるイージングの種類は、 Tween24.setDefaultEasing() を使うことによって、変更もできるようでした。
おわりに
今回、今まで使ったことがなかったアニメーションライブラリを使い、イージングの処理を簡単に試してみました。
ひとまずベースはできあがったので、さらに Tween24 を使ったアニメーションと p5.js の組み合わせを試していければと思います。