UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル

ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。

アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。

Giving Animations Life

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• Step 1: まずはシンプルに動かしてみよう
• Step 2: バウンドを加える
• Step 3: バウンドを自然な動きにする
• Step 4: ディズニー®の12の基本原則を取り入れる
• Step 5: アニメーションを誇張する
• Step 6: アニメーションに命を吹き込む
• キーフレームを簡単に設定できるスクリプト

Step 1: まずはシンプルに動かしてみよう

まずはシンプルに、パネルを垂直方向に移動させるアニメーションです。

コマ送りで見たい人用：動画

これは出発点と到達点に2つのキーフレームを使い、パネルを垂直方向に移動させています。

CSS

.form {
   animation: form-fly-up 0.35s ease;
}

@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   100% { transform: translateY(0); }
}

アニメーションの動きは少し不自然でかっこよくは見えませんが、CSS3アニメーションを使った最もシンプルな実装例です。実装のポイントは「ease」を使い、動きにイージング（緩和）をもたせ、アニメーションが止まる時に動きを減退させています。

Step 2: バウンドを加える

パネルが止まる前に、距離を少しだけ余分に動かしてみましょう。

コマ送りで見たい人用：動画

「50%」のキーフレームを増やし、パネルを到達点より-50pxほど余分に動かしました。

CSS

.form {
   animation: form-fly-up 0.45s ease;
}

@keyframes form-fly-up {
   0% { transform: translateY(500px); }
   50% { transform: translateY(-50px); }
   100% { transform: translateY(0); }
}

余分に動かすことで、パネルはバウンドしているようにアニメーションします。
しかし、動きは少しぎこちないです。このぎこちなさはキーフレームを増やすことで、よりスムーズな動きになります。

Step 3: バウンドを自然な動きにする

アニメーションの動きをよりスムーズにするため、キーフレームを増やします。

コマ送りで見たい人用：動画

CSS

.form {
   animation: form-fly-up 1s linear;
}

@keyframes form-fly-up {
   /* キーフレームの指定（Bounce.js） http://goo.gl/AUAzKV */ 
}

デフォルトのイージング機能を使い、キーフレームを増やして動きを細かく指定することでアニメーションを滑らかにしました。
キーフレームの設定には、「Bounce.js」を使用しています。

このアニメーションをもっとよくするための改善方法を考えてみましょう。ディズニー®の「12 basic principles of animation（アニメーションの12の基本原則）」がアイデアの源となり、よいインスピレーションが得られます。

Step 4: ディズニー®の12の基本原則を取り入れる

ディズニー®の12の基本原則の5番目「Follow through and overlapping action」を取り入れます。これはアニメーションする人物や物体が物理法則に従い、後に続くというものです。

コマ送りで見たい人用：動画

パネルの動きが止まった後、それに続くようにボタンを動かします。

CSS

.form {
   animation: form-fly-up 1s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

@keyframes form-fly-up {
   /* キーフレームの指定（Bounce.js） http://goo.gl/TvjpS6 */
}

@keyframes button-bounce {
   /* キーフレームの指定（Bounce.js） http://goo.gl/sNmGrx */
}

ボタンの動きを強調するために、パネルとは少し異なるアニメーションにしています。

Step 5: アニメーションを誇張する

パネルを移動する方向に合わせて伸ばし、モーションブラーをシミュレートさせます。これは「Animation Smear」というアニメーションで普通に使われている有用なテクニックです。

コマ送りで見たい人用：動画

CSS

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

@keyframes form-fly-up {
   /* キーフレームの指定（Bounce.js） http://goo.gl/dvi8wI */
}

@keyframes button-bounce {
   /* キーフレームの指定（Bounce.js） http://goo.gl/sNmGrx */
}

このテクニックはいわゆる「誇張」を使ったもので、実際にはそのように形状は変化しませんが、アニメーションの動きをより魅力的に楽しくする効果があります。
次の最後のステップでディズニーの12の基本原則を使い、仕上げましょう。

Step 6: アニメーションに命を吹き込む

この最後のステップでは、ディズニー®の12の基本原則の1番目「Squash and Stretch」を使い、アニメーションに命を吹き込みます。
この原則は、オブジェクトに重量と柔軟性を与えます。

コマ送りで見たい人用：動画

ボールを例にこのアニメーションの仕組みを見てみましょう。地面に弾む時にボールの形状は圧縮され、上へ跳ねる時に膨らみます。注目すべきは、形状が変化している時でもボリュームは維持されたままであることです。

CSS

.form {
   transform-origin: 50% 0;
   animation: form-fly-up 1.29s linear;
}

.button {
   animation: button-bounce 1s 0.12s linear;
}

@keyframes form-fly-up {
   /* キーフレームの指定（Bounce.js） http://goo.gl/G1h7Qa */
}

@keyframes button-bounce {
   /* キーフレームの指定（Bounce.js） http://goo.gl/G1h7Qa */
}

最後に加えたアニメーションは、マンガ的に見えると思います。ここまで派手な動きは必要ない人もいるかもしれませんが、分かりやすくするために極端なエフェクトにしました。

ここで紹介したすべての原則は、より繊細にしてアニメーションに利用することができます。

キーフレームを簡単に設定できるスクリプト

手作業でもキーフレームを設定することはできますが、下記のスクリプトを使用するとより簡単にアニメーションの設定ができます。

Bounce.js