ブログ

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

ball-animation-Ver.2

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

準備

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

動きの分解

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

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

レイヤーを複製して変形

分解した動きの分だけレイヤーを複製します。(下から順に並んでいます)
01
それぞれ変形をします。
重なった状態はこんな感じ。つぶれたとき、高さは縮んで、横幅は伸びています。
02

タイムラインに並べる

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

書き出してみる

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

時間調整

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

完成

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

おまけ

ボヨヨンとスットントンのハイブリッドバージョンです。
影も動きに合わせて伸縮しているので、より芸が細かくなっています。
ball-bound
今回のgifアニメも素材配布させていただきますので、権利とか気にせずご自由にお使いください。
がんばれ広島!

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. 2017-new-year-bird-8 あけましておめでとうございます。
  2. blog_twitter 流行語大賞2016 in MF広島オフィス 年間大賞発表
  3. 40f8970f6d4d71678b9f13c00265354d_s Atomで書いたコードに見えないTofu(豆腐)が紛れ込んだ時の…
  4. blog_gif-01 エム・フィールド広島オフィスの福利厚生事情
  5. carp3 【カープ】#3 広島、丸3打点の活躍でセリーグ最上位の3位に!
  6. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  7. desk 知識や技術と同じくらい大事なのはディスプレイと椅子
  8. 用語辞典イラスト エム・フィールド広島オフィスの日常

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP