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

ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Step 1: まずはシンプルに動かしてみよう Step 2: バウンドを加える Step 3: バウンドを自然な動きにする Step 4: ディズニー®の12の基本原則を取り入れる Step 5: アニメーションを誇張する Step 6: アニメーションに命を吹き込む キーフレームを簡単に設定できるスクリプト St

[hedeyoshi]

おっぱいの揺れるアニメーションをこれで作ったらいいんじゃないかな！かな！

[s99e209]

いま進行中のサイトリニューアル、競合サイトに差を付けるためにこの辺のアニメーションを取り入れてみようかな。