アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。

本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。

本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となっています。また、ウェブに限らずスマホアプリやサイネージなどデジタルコンテンツ全般に役立ちます。

パラメーターを個別に操作する

トゥイーンで複数のパラメーターを同時に変化させる場合、パラメーター毎にトゥイーンを分割し、個別に操作をすると一味違った表現ができます。

イージングを変える

パラメーター毎に違うイージングを設定すると、思わぬ動きになる時があります。たとえばXY座標を変化させる場合に、X座標のイージングをquartInOut、Y座標のイージングをbackOutにすると、直線的な動きからカーブを描くようなズルい動きに変わります。

• デモを別ウインドウで再生する
• ソースコードを確認する

// 同じイージングで変化させる場合
createjs.Tween.get(mt1).to(
  { x: 310, y: 150 },
  1000,
  createjs.Ease.quartInOut
);

// Y座標だけイージングをbackOutに変更した場合
createjs.Tween.get(mt2).to(
  { x: 310 },
  1000,
  createjs.Ease.quartInOut
);
createjs.Tween.get(mt2).to(
  { y: 150 },
  1000,
  createjs.Ease.backOut
);
createjs.Tween.get(mt2).to(
  { scaleX: 1, scaleY: 1 },
  1000,
  createjs.Ease.quartInOut
);

私はこれに拡大する動きを加えて、ズームするような表現をしたい時によくこの手法をよく使います。奥行き感が出て、ちょっと凝っているようなズルい雰囲気が出せます。

• デモを別ウインドウで再生する
• ソースコードを確認する

// 同じイージングで変化させる場合
createjs.Tween.get(mt1).to(
  { x: 520, y: 200 },
  1000,
  createjs.Ease.quartInOut
);

// Y座標だけイージングをbackOutに変更した場合
createjs.Tween.get(mt2).to(
  { x: 520 },
  1000,
  createjs.Ease.quartInOut
);
createjs.Tween.get(mt2).to(
  { y: 200 },
  1000,
  createjs.Ease.backOut
);

またbackOutの部分をlinearに変えると、今度はジグザグするような動きに変わります。このように、異なったイージングを組み合わせるだけでさまざまなズルい表現ができます。

• デモを別ウインドウで再生する
• ソースコードを確認する

// 同じイージングで変化させる場合
createjs.Tween.get(mt1).to(
  { x: 520, y: 200 },
  1000,
  createjs.Ease.quartInOut
);

// Y座標だけイージングをlinearに変更した場合
createjs.Tween.get(mt2).to(
  { x: 520 },
  1000,
  createjs.Ease.quartInOut
);
createjs.Tween.get(mt2).to(
  { y: 200 },
  1000,
  createjs.Ease.linear
);

イージングを使いこなすと、アニメーションにさまざまな表情がつけれます。詳しく学びたい方は、feb19さんの記事「アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)」が参考になりますのでご覧ください。

タイミングをずらす

イージングや変化させる値はそのままでも、タイミングをずらして再生するだけでアニメーションの表情は変わります。たとえば、以下の拡大するアニメーションの場合、横方向のスケールと縦方向のスケールでトゥイーンを分け、少しだけ再生タイミングをずらすとスライムのような柔らかいズルい質感が出てきます。

▲ 左：同時に再生する場合 / 右：縦方向のスケールを0.1秒ずらして再生した場合

• デモを別ウインドウで再生する
• ソースコードを確認する

// 同時に再生する場合
createjs.Tween.get(mt1).to(
  { scaleX: 1, scaleY: 1 },
  1000,
  createjs.Ease.elasticOut
);

// 縦方向のスケールを0.1秒ずらして再生した場合
createjs.Tween.get(mt2).to(
  { scaleX: 1 },
  1000,
  createjs.Ease.elasticOut
);
createjs.Tween.get(mt2)
  .wait(100)
  .to({ scaleY: 1 }, 1000, createjs.Ease.elasticOut);

動きをちょい足しする

シンプルなアニメーションでは、動きのメリハリがなく単調な見映えになってしまうことがあります。そういった場合、元になるアニメーションに少し動きを付け加えるだけで動きにぐっと奥行きが出せます。

回転を加える

横移動するアニメーションに、回転の動作を足して「予備動作」と「後追い」の演出を加えます。「予備動作」はアクションの前兆となるの動きで、「後追い」はアクションの後に追従する動作です。これらによって動きにメリハリがつき、また大げさに入れるほどアニメーションらしい楽しげなズルい動きになります。

▲ 上：横移動のみの場合 / 下：横移動に回転の動きを加えた場合

• デモを別ウインドウで再生する
• ソースコードを確認する

// 横移動のみの場合
createjs.Tween.get(mt1)
  .wait(300)
  .to({ x: 545, alpha: 1 }, 600, createjs.Ease.circInOut);

// 回転の動きを加えた場合
createjs.Tween.get(mt2)
  .wait(300)
  .to({ x: 545, alpha: 1 }, 600, createjs.Ease.circInOut);
createjs.Tween.get(mt2)
  .to({ rotation: -30 }, 400, createjs.Ease.circOut)
  .to({ rotation: 10 }, 600, createjs.Ease.circInOut)
  .to({ rotation: 0 }, 300, createjs.Ease.getBackOut(4));

伸縮を加える

落ちて跳ねるアニメーションに、伸縮の動作を足して「状態変化」の演出を加えます。アニメーション中に状態を変化させると動作が誇張され、元の動きがより際立ちます。

▲ 左：落ちて跳ねる動きのみの場合 / 右：伸縮の動きを加えた場合

• デモを別ウインドウで再生する
• ソースコードを確認する

// 落ちて跳ねる動きのみの場合
createjs.Tween.get(mt1).to(
  { y: 300 },
  1000,
  createjs.Ease.bounceOut
);

// 落ちて跳ねる動きに、伸縮の動きを加えた場合
createjs.Tween.get(mt2).to(
  { y: 300 },
  1000,
  createjs.Ease.bounceOut
);
createjs.Tween.get(mt2).to(
  { scaleX: 1, scaleY: 1 },
  300,
  createjs.Ease.getBackOut(4)
);

まとめ

パラメーターを変えるだけで、まったく違った動きを試せるのがトゥイーンアニメーションのいいところですね。今回紹介したズルいテクニックを押さえておけば、少し手間をかけるだけでアニメーションの表現をぐっと「いい感じ」にできます。また記事「CSS Animationだけで実現するキャラクターアニメーション」では、これらのテクニックを使ったキャラクターアニメーションを紹介していますので、ぜひこちらもご覧ください。

紹介したデモとソースコードは以下からまとめて確認できますので、ご参考ください。

• デモを別ウインドウで再生する
• ソースコードを確認する