演出の雰囲気を紹介する記事です
前回の記事「フロントエンド演出：ふわふわ浮遊する動きの作り方」でありがたい反応をいただいたので、不定期で演出系の記事を続けることにしました
特にソースコードなどは紹介しません。JSでもCSSでも使えるように雰囲気をお伝えできればと思います。演出づくりはその雰囲気で作っていくものなので（ここはビビビッと出てきてサッと消える感じなどなど）。
因みに、今回掲載する素材はAnimate CCで作成しました。
物体に弾力をあたえる
今回のゴールはこちらです。円がぐーっと縮んで跳ねるように大きくなるという感じです。
まずは動きのきっかけをあたえる
弾力に限らず、アニメーションする前に動くきっかけをつけてあげます。今回で言うと「ぐーっと縮んで」という部分です。人がジャンプするときも、体制を低くしてぐーっと力をためて飛びますよね？ あれと同じ感覚です。「これから動きますよ〜」と見ている人に伝えます。この動きをつけることで、全体のアニメーションのリアリティが増します。
つくりかた
大きさ（scale）
今回は移動ではなく、大きさ（scale）で動きをつけます。動きの分け方は、「大きくなる→小さくなる」「小さくなる→大きくなる」の動きが変化するタイミングです。今回のサンプルでは次のように分けました（通常の大きさを100%として）。
- 100%
- 50%
- 130%
- 80%
- 110%
- 95%
- 102%
- 100%
一度ためたエネルギーは動きとともに消費されるので、だんだんと振れ幅を小さくします。これは僕の個人的な感覚なのですが、前の振り幅の半分くらいで変化すると自然に見えるかなと思います（前は50%小さくなったから、次はそのほぼ半分の30%振れるように130%の大きくしようかななどなど）。
時間
次にそれぞれの大きさに到達するまでの時間を設定します。前半ほど振れ幅が大きいので時間を長く、後半ほど短くします。今回は次のようにしました。
- 100%→50%へ小さくなる：1000ミリ秒
- 50%→130％へ大きくなる：233ミリ秒
- 130%→80へ小さくなる：200ミリ秒
- 80%→110%へ大きくなる：150ミリ秒
- 110%→95%へ小さくなる：117ミリ秒
- 95%→102%へ大きくなる：100ミリ秒
- 102%→100%へ小さくなる：83ミリ秒
これだけでも良さげな動きになってきました。
イージング
イージングを解説しようと思ったのですが、指定しなくても良さげな動きになってしまいました。が、さらに滑らかさを出すためにイージングを指定します。前回の記事ではイーズインとイーズアウトを使いましたが、今回はイーズインアウトを指定します。だんだん速くなって中間を越えたあたりからだんだん遅くなるというものです。
▲完成
動きの速さで固さに変化が
現状では柔らかいものがほわんとバウンドしている印象です。この動きの速さを全体的に短くすると固い印象になります。
ゆったりしたものは柔らかく見え、キビっとしたものは固く見えるようです。