ブログ

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. ba2d551a71d04d5d845f05aa74658fb5_m パソコンスクール HA*NA講師を終えて
  2. img_0350 噂のカスタマージャーニーマップの研修を社内でしたのでまとめてみた…
  3. consaru エム・フィールド 広島オフィスで「広島フロントエンド勉強会 Vo…
  4. news_study 第95回「WEB TOUCH MEETING」にUstreamで…
  5. magazine2-50 PHP Business 「THE21」3月号に掲載されました!…
  6. DSC_0704 広島フロントエンド勉強会 Vol.1 開催レポート
  7. hirofuro-eyecatch-8 ヒロフロデザイン部『webデザインの情報交換会』4/1開催します…
  8. tsubomi 4月7日 お花見の参加者を公募します

最近の記事

  1. DSC_0072
  2. Hirofuro-logo-8
  3. carp9
  4. carp8
  5. carp7
PAGE TOP