JavaScript で Tweenアニメーションが扱えるライブラリを調べてみると、よく出てくるものがいくつかあります。
今回の記事では、調べてよく出てくるライブラリの中の1つである「anime.js」を使い、「p5.js」で Tweenアニメーションを試してみた、という話です。
他の Tweenアニメーション用JavaScriptライブラリと p5.js を組み合わせた事例
anime.js を試していく前に、他の Tweenアニメーションが扱えるライブラリと p5.js を組み合わせた事例が既にあるので、以下に記載してみます。
GSAP
●GSAP Basic - OpenProcessing
https://openprocessing.org/sketch/1227453
こちらは GSAP というライブラリとの組み合わせです。
p5.js と組み合わせて使う場合の書き方は、以下のようになるようです。
var ball;
function setup() {
createCanvas(windowWidth, windowHeight);
ball = {
x: width / 8,
y: height / 2,
diameter: 10,
col: color(31, 190, 190),
}
gsap.to(ball, {
x: width - width / 8,
y: height / 2,
diameter: height / 4,
col: color(255, 127, 31),
duration: 3,
delay: 1,
ease: "expo.inOut",
});
}
function draw() {
background(0);
noStroke();
fill(ball.col);
circle(ball.x, ball.y, ball.diameter);
}
p5.tween
●Milchreis/p5.tween: Tween library for P5.js
https://github.com/Milchreis/p5.tween#-examples
こちらは p5.js用のライブラリです。
上記のページ内に複数のサンプルが掲載されています。
anime.js を使う
anime.js について
以下の公式ページの説明によると、anime.js は「軽量さと、シンプルでパワフルなAPI」を売りにしているライブラリのようです。
●juliangarnier/anime: JavaScript animation engine
https://github.com/juliangarnier/anime/
公式ドキュメントを見てみると、Tweenアニメーション以外のアニメーションも利用できるようです。
p5.js と組み合わせて使う
p5.js Web Editor での下準備
この記事では、オンライン開発・実行環境である「p5.js Web Editor」を使ってプログラムを作成してみます。
まずは p5.js Web Editor で anime.js が使えるようにするために、ライブラリを読み込ませます。
そのライブラリの読み込み元は、以下に書かれている CDN を用いることにします。
●animejs - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
https://cdnjs.com/libraries/animejs
この CDN の「anime.min.js」を、p5.js Web Editor の index.html のタグに記載します。
メインのプログラムを書いていく
ここからは p5.js Web Editor の sketch.js を編集していきます。
まずは、冒頭で記載していた他のライブラリと p5.js を組み合わせた事例を参考に、animation.js でも似たようなことが行えそうか、animation.js の公式ドキュメントを見たりしつつ確認してみます。
以下の「TARGETS」の中の「JAVASCRIPT OBJECT」という部分を見てみると、上で掲載した GSAP の事例と似たような書き方ができそうです。
●Documentation | anime.js
https://animejs.com/documentation/#JSobject
上記の書き方を使って、実際に作ってみたプログラムは以下のとおりです。
let ball;
function setup() {
createCanvas(500, 500);
ball = {
x: 100,
y: 100,
diameter: 50,
col: 100,
};
anime({
targets: ball,
x: 300,
y: 250,
diameter: 150,
col: 200,
easing: "linear",
});
}
function draw() {
background(0);
noStroke();
fill(ball.col);
circle(ball.x, ball.y, ball.diameter);
}
実行してみると、うまく Tweenアニメーションが動きました。
おわりに
今回、p5.js と anime.js を組み合わせた Tweenアニメーションを試して、無事に動作させることができました。
実は、今回の anime.js との組み合わせを試す前に「p5.tween」・「GSAP」・「TweenJS」との組み合わせは試していました(以下の動画が試しに作ってみたもので、記事にはできてないのですが...)。
- p5.js でイージングを使った 5つのボールがバウンドするアニメーション(p5.tween を利用) - YouTube
- p5.js で Tweenアニメーション・イージングを使ってとびはねながら画面を横切るボールの描画(ライブラリで GSAP を利用) - YouTube
- TweenJS と p5.js を組み合わせた Tweenアニメーション - YouTube
それぞれ使い勝手やできることに違いがあるので、anime.js も含めて比較などを行っていければと思っています。