1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

p5.js と anime.js を組み合わせた Tweenアニメーション

Last updated at Posted at 2021-10-09

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/
anime.js.jpg

公式ドキュメントを見てみると、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
ターゲット.jpg

上記の書き方を使って、実際に作ってみたプログラムは以下のとおりです。


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」との組み合わせは試していました(以下の動画が試しに作ってみたもので、記事にはできてないのですが...)。

それぞれ使い勝手やできることに違いがあるので、anime.js も含めて比較などを行っていければと思っています。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?