Category
デザイン

Blog

GIFアニメで「ボヨヨン」の動きを作る

こんにちは、デザイナーのTantanです。
前回のGIFアニメで「スットントン」の動きを作る!に続いて、今回は変形を加えた「ボヨヨン」という動きを作ろうと思います。やわらかいものの質感を表現できますので、動くLINEスタンプなどに使うとかわいいと思います。

準備

背景が透過されたロゴなどの画像を用意します。
背景色を別レイヤーに塗ります。(今回は影もいます)

動きの分解

  1. 元の状態
  2. 縦に伸びる
  3. 縦にもっと伸びてタメ
  4. 一気に縮んで床の反発で横に潰れる
  5. 反動で少しまた伸びる
  6. 小さくつぶれる
  7. 小さくのびる
  8. 元の状態

これが今回の動きです。
前回のスットントンと似て、地面に反発して2バウンドするのは同じです。
そのとき床に負けて横に潰れることで、やわらかさが表現できます。

レイヤーを複製して変形

分解した動きの分だけレイヤーを複製します。(下から順に並んでいます)

それぞれ変形をします。
重なった状態はこんな感じ。つぶれたとき、高さは縮んで、横幅は伸びています。

タイムラインに並べる

ウィンドウ→タイムラインを表示して、「ビデオタイムラインを作成」にしてください。このへんわからない方は前回をご参照ください→
レイヤーを階段上に並べていきます。タメを作りたいところは少し長めに伸ばしておきます。

書き出してみる

ファイル→書き出し→Web用に保存 ループを無限に設定して保存します。
こんな感じ。

時間調整

ちょっとせわしないのでフレームを足します。
それぞれのレイヤーを1.5倍くらいに伸ばして階段上に並べ直して、、、
こんな感じに並べました。

完成

書き出して完成です。ありがとうございました!

おまけ

ボヨヨンとスットントンのハイブリッドバージョンです。
影も動きに合わせて伸縮しているので、より芸が細かくなっています。

今回のgifアニメも素材配布させていただきますので、権利とか気にせずご自由にお使いください。
がんばれ広島!

関連記事

関連サービス