Anime.js v4系を p5.js Web Editor上で利用（読み込み方法 2種で）：過去の内容に関する最新版での再実装【p5.js：2】

Posted at 2025-11-19

（この記事は p5.js の Advent Calendar 2025 の記事【2つ目】にする予定です）

はじめに

この記事は、以下の「Anime.js」に関する記事です。

●Anime.js | JavaScript Animation Engine
　https://animejs.com/

Anime.js に関する記事は、以前、p5.js Web Editor上で使うという内容で以下の記事などを書いていました（2021年10月ごろなど）。

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

Anime.js を久しぶりに使ってみようと思ったのですが、上記の記事を書いた時からは、かなりバージョンアップがあるようでした。

それで、とりあえず過去の記事で実装していた内容を、Anime.js の最新バージョンに対応した内容にするということだけやってみました。

実際にやってみる

今回対応した内容

上で「過去の記事で実装していた内容を、Anime.js の最新バージョンに対応した内容にする」と書いていた話について、対応が必要な内容を確認してみたところ、以下を行う必要がありそうでした。

関数 anime() ではなく animate() を使う
アニメーションを適用する対象の指定に targets プロパティは使わず、第1引数に指定して渡す
easing ではなく ease という名前にする

長い年月が経過した中で、今回のようなシンプル内容でも影響を受けるような仕様変更がありました。

今回使う 2種類のライブラリの読み込み方法

今回の内容を進めていく際に、ライブラリの読み込み方法は複数ありそうでした。

その中で、個人的に試したいと思った 2種類の方法を、両方とも試してみることにしました（具体的には、公式ページの以下に書かれている内容が関係します）。

それらの方法を使った実装を、順番にやってみます。

ダイナミックインポートを利用

1つ目は、以前記事にも書いたことがある「ダイナミックインポート」を使った方法です。ES Module形式のものを動的にインポートします。

p5.js Web Editor上では、sketch.js を以下の内容にします。

let ball;

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

  const { animate } = await import("https://esm.sh/animejs@4.2.2");

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

  animate(ball, {
    x: 300,
    y: 250,
    diameter: 150,
    col: 200,
    duration: 1000,
    ease: "linear",
  });
}

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

上記の処理は Anime.js v4系に対応させた書き方にしたものです。

この処理を実行してみたところ、問題なく動作しました。

ダイナミックインポートを利用2

ちなみに from を使って初期値を指定する、以下のような書き方もできるようです。

let ball = {};

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

  const { animate } = await import("https://esm.sh/animejs@4.2.2");

  animate(ball, {
    x: { from: 100, to: 300 },
    y: { from: 100, to: 250 },
    diameter: { from: 50, to: 150 },
    col: { from: 100, to: 200 },
    duration: 1000,
    ease: "linear",
  });
}

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

scriptタグでの読み込み

2つ目は「scriptタグでの読み込み」です。グローバル変数として animeオブジェクトが利用可能になる、UMD（Universal Module Definition）形式となります。

p5.js Web Editor上では、index.html に以下の scriptタグを追加します。

      <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>

記事執筆時点で、p5.js Web Editor の index.html に Anime.js を読み込みを追加したものは、以下の通りです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.11/lib/addons/p5.sound.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

そして、sketch.js の内容は以下としました。

let ball;

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

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

  const { animate } = anime;

  animate(ball, {
    x: 300,
    y: 250,
    diameter: 150,
    col: 200,
    duration: 1000,
    ease: "linear",
  });
}

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

これも処理を実行してみたところ、問題なく動作しました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Anime.js v4系を p5.js Web Editor上で利用（読み込み方法 2種で）： 過去の内容に関する最新版での再実装【p5.js：2】