on:2015年4月7日sponsorsボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。Life下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。シンプルに動かしてみようまずはシンプルに、パネルを垂直方向に移動させるアニメーションです。コマ送りで見たい人用:動画これは出発点と到達点に2つのキーフレームを使い、パネルを垂直方向に移動させています。}}アニメーションの動きは少し不自然でかっこよくは見えませんが、CSS3アニメーションを使った最もシンプルな実装例です。実装のポイントは「ease」を使い、動きにイージング(緩和)をもたせ、アニメーションが止まる時に動きを減退させています。バウンドを加えるパネルが止まる前に、距離を少しだけ余分に動かしてみましょう。「50%」のキーフレームを増やし、パネルを到達点より-50pxほど余分に動かしました。}}余分に動かすことで、パネルはバウンドしているようにアニメーションします。動きは少しぎこちないです。このぎこちなさはキーフレームを増やすことで、よりスムーズな動きになります。バウンドを自然な動きにするアニメーションの動きをよりスムーズにするため、キーフレームを増やします。}デフォルトのイージング機能を使い、キーフレームを増やして動きを細かく指定することでアニメーションを滑らかにしました。キーフレームの設定には、「Bounce.js」を使用しています。このアニメーションをもっとよくするための改善方法を考えてみましょう。animation(アニメーションの12の基本原則)」がアイデアの源となり、よいインスピレーションが得られます。action」を取り入れます。これはアニメーションする人物や物体が物理法則に従い、後に続くというものです。コマ送りで見たい人用:動画パネルの動きが止まった後、それに続くようにボタンを動かします。*/}ボタンの動きを強調するために、パネルとは少し異なるアニメーションにしています。アニメーションを誇張するパネルを移動する方向に合わせて伸ばし、モーションブラーをシミュレートさせます。Smear」というアニメーションで普通に使われている有用なテクニックです。*/}このテクニックはいわゆる「誇張」を使ったもので、実際にはそのように形状は変化しませんが、アニメーションの動きをより魅力的に楽しくする効果があります。次の最後のステップでディズニーの12の基本原則を使い、仕上げましょう。Stretch」を使い、アニメーションに命を吹き込みます。この原則は、オブジェクトに重量と柔軟性を与えます。コマ送りで見たい人用:動画ボールを例にこのアニメーションの仕組みを見てみましょう。地面に弾む時にボールの形状は圧縮され、上へ跳ねる時に膨らみます。注目すべきは、形状が変化している時でもボリュームは維持されたままであることです。*/}最後に加えたアニメーションは、マンガ的に見えると思います。ここまで派手な動きは必要ない人もいるかもしれませんが、分かりやすくするために極端なエフェクトにしました。ここで紹介したすべての原則は、より繊細にしてアニメーションに利用することができます。キーフレームを簡単に設定できるスクリプト手作業でもキーフレームを設定することはできますが、下記のスクリプトを使用するとより簡単にアニメーションの設定ができます。Posts関連記事が見つかりませんでした。