【ANIME.JS】複数の連続したアニメーションを実装する方法

2018年3月10日2019年6月12日ANIME.JS,JavaScriptライブラリ,JavaScript

「ANIME.JS」で複数の連続したアニメーションを実装する方法です

delayで開始時間をずらして繋いだり、Keyframes、タイムラインでの実装など様々な方法が用意されています

delayのみで連続メーション

この方法は簡単に利用できますが、同じアニメーションを別々に定義できない難点があります

See the Pen ANIME.JS Continuous Animation（delay） by yochans (@yochans) on CodePen.

JavaScript

//delayのみで連続メーション
  anime({
    targets: '#target',
    loop: true,
  translateX: {
    value: 250,duration: 800,delay: 0,
  },
  rotate: {
    value: 360,duration: 800,delay: 800,
  },
  scale: {
    value: 1.5,duration: 800,delay: 1600,
  }
  });

順番に実行するにはdurationの時間をdelayの時間に足していけばOKですね

この記述の場合、例えば「translateX」は２度目を定義ないので注意です（後者のみが適用されます）

Keyframesを利用して連続アニメーション

「ANIME.JS」の説明にKeyframesと名付けられていますが、CSSのそれとは少し違います

記述的には上のdelayでずらして実装する方法にアニメーション配列を追加する事で同じアニメーションを複数呼び出せる感じですね

See the Pen ANIME.JS Continuous Animation Keyframes by yochans (@yochans) on CodePen.

JavaScript

//Keyframesでの連続アニメーション
  anime({
    targets: '#target',
    loop: true,
    translateX: [
    { value: 150, duration: 1000, delay: 300, elasticity: 0 },
    { value: 300, duration: 1000, delay: 300, elasticity: 0 },
    { value: 0, duration: 1000, delay: 300, elasticity: 0 }
    ]
  });

配列内で記述していけば同じアニメーションの連続したイベントも実装できカンマ区切りで他のアニメーションも同時に定義可能です

最初の例と違うのはdelayは合計値ではなく都度の遅延時間を記述すれば良いところですね

タイムラインを利用して連続メーション

どちらかというと、タイムライン（timeline）での利用の方がCSSのKeyframesアニメーションに近いイメージです

timelineキーを作成、addを使い連続したアニメーションの実装が可能です

See the Pen ANIME.JS Continuous Animation Timeline by yochans (@yochans) on CodePen.

JavaScript

//タイムラインでの連続アニメーション
const animationName = anime.timeline({
 loop: true,
});

animationName
  .add({
    targets: '#target',
    translateX: 150,
    elasticity: 0,
  })
  .add({
    targets: '#target',
    translateX: 300,
    elasticity: 0,
  })
  .add({
    targets: '#target',
    translateX: 0,
    elasticity: 0,
  });

コードも進行順に記述できてわかりやすく、targetsを個別に指定できるのでかなり便利ですね