Help us understand the problem. What is going on with this article?

フロントエンド演出:物体に弾力をあたえる

More than 3 years have passed since last update.

演出の雰囲気を紹介する記事です

前回の記事「フロントエンド演出:ふわふわ浮遊する動きの作り方」でありがたい反応をいただいたので、不定期で演出系の記事を続けることにしました:bow_tone1:

特にソースコードなどは紹介しません。JSでもCSSでも使えるように雰囲気をお伝えできればと思います。演出づくりはその雰囲気で作っていくものなので(ここはビビビッと出てきてサッと消える感じなどなど)。

因みに、今回掲載する素材はAnimate CCで作成しました。

物体に弾力をあたえる

今回のゴールはこちらです。円がぐーっと縮んで跳ねるように大きくなるという感じです。

cap1.gif

まずは動きのきっかけをあたえる

弾力に限らず、アニメーションする前に動くきっかけをつけてあげます。今回で言うと「ぐーっと縮んで」という部分です。人がジャンプするときも、体制を低くしてぐーっと力をためて飛びますよね? あれと同じ感覚です。「これから動きますよ〜」と見ている人に伝えます。この動きをつけることで、全体のアニメーションのリアリティが増します。

つくりかた

大きさ(scale)

今回は移動ではなく、大きさ(scale)で動きをつけます。動きの分け方は、「大きくなる→小さくなる」「小さくなる→大きくなる」の動きが変化するタイミングです。今回のサンプルでは次のように分けました(通常の大きさを100%として)。

  1. 100%
  2. 50%
  3. 130%
  4. 80%
  5. 110%
  6. 95%
  7. 102%
  8. 100%

一度ためたエネルギーは動きとともに消費されるので、だんだんと振れ幅を小さくします。これは僕の個人的な感覚なのですが、前の振り幅の半分くらいで変化すると自然に見えるかなと思います(前は50%小さくなったから、次はそのほぼ半分の30%振れるように130%の大きくしようかななどなど)。

時間

次にそれぞれの大きさに到達するまでの時間を設定します。前半ほど振れ幅が大きいので時間を長く、後半ほど短くします。今回は次のようにしました。

  1. 100%→50%へ小さくなる:1000ミリ秒
  2. 50%→130%へ大きくなる:233ミリ秒
  3. 130%→80へ小さくなる:200ミリ秒
  4. 80%→110%へ大きくなる:150ミリ秒
  5. 110%→95%へ小さくなる:117ミリ秒
  6. 95%→102%へ大きくなる:100ミリ秒
  7. 102%→100%へ小さくなる:83ミリ秒

cap2.gif

これだけでも良さげな動きになってきました。

イージング

イージングを解説しようと思ったのですが、指定しなくても良さげな動きになってしまいました。が、さらに滑らかさを出すためにイージングを指定します。前回の記事ではイーズインとイーズアウトを使いましたが、今回はイーズインアウトを指定します。だんだん速くなって中間を越えたあたりからだんだん遅くなるというものです。

cap1.gif

▲完成

動きの速さで固さに変化が

現状では柔らかいものがほわんとバウンドしている印象です。この動きの速さを全体的に短くすると固い印象になります。

cap3.gif

ゆったりしたものは柔らかく見え、キビっとしたものは固く見えるようです。:relaxed:

umi_kappa
週4で阿佐ヶ谷の飲み屋で芋飲んでます。いつもいるねって言われるけど、ちゃんと仕事してますよ。JSとかアプリとかでIoTなコンテンツを作るお仕事やってます。
http://umikappa.main.jp/
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away