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

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

Giving Animations Life

下記は各ポイントを意訳したものです。

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

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

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

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

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

CSS

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

Step 2: バウンドを加える

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

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

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

CSS

余分に動かすことで、パネルはバウンドしているようにアニメーションします。

しかし、動きは少しぎこちないです。このぎこちなさはキーフレームを増やすことで、よりスムーズな動きになります。

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

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

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

CSS

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

キーフレームの設定には、「Bounce.js」を使用しています。

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

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

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

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

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

CSS

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

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

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

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

CSS

このテクニックはいわゆる「誇張」を使ったもので、実際にはそのように形状は変化しませんが、アニメーションの動きをより魅力的に楽しくする効果があります。

次の最後のステップでディズニーの12の基本原則を使い、仕上げましょう。

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

この最後のステップでは、ディズニー®の12の基本原則の1番目「Squash and Stretch」を使い、アニメーションに命を吹き込みます。

この原則は、オブジェクトに重量と柔軟性を与えます。

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

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

CSS

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

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

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

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

Bounce.js