![見出し画像](https://assets.st-note.com/production/uploads/images/75315576/rectangle_large_type_2_e472cc82cb20ccc92c569139bc5c8607.png?width=1200)
【AE】ハート消費でゲームスタートするボタンアニメーションの作り方
こんにちは。ゲームUIデザイナーのはなさくのです。
今回は、AfterEffectsで、ハートを消費してゲームスタートするボタンアニメーションを作る方法についてご紹介します!
01|ハート消費でゲームスタートするボタンアニメーションの作り方
基本的にシンプルなアニメーションの組み合わせで作成していますので、分解していきましょう!
01-01|ボタンの拡縮アニメーション
まずは、ボタンの拡縮アニメーションです。
ボタンの縮小 > 拡大 > 縮小 >ちょっと拡大 >ちょっと縮小 > ちょっと拡大を繰り返して、ぽよん!というような動きにしています。
また、ハートがボタンにぶつかった時に、光らせる処理を入れています。
01-02|サークルアニメーション
中央から外側へ向かって開くサークルを2つ時間差で動かしています。2つ目のサークルは線幅を【太 > 細】へ変化させています。
01-03|ハートの拡縮アニメーション
中央の大きなハートは拡縮し、周囲の小さなハートは、中央から外側へ向かっていくアニメーションにしています。
![](https://assets.st-note.com/production/uploads/images/75575597/picture_pc_407d5b1c84690e14db4f96d1866fc009.gif?width=1200)
中央から外側へ向かうハートですが、上記の1パターンのみを作成して、後はAEのミラーというエフェクトを使って複製しています。
01-04|ハートがはじけるパーティクルアニメーション
みんな大好きAEのパーティクルを使って、小さなハートを中央から外側へふわっとはじけさせています。
これら4つのアニメーションを組み合わせて、ハートを消費してスタートするボタンのアニメーションを作成しました。
ぜひ、ページ下から、AfterEffectsファイルをダウンロードして、データを確認してみてくださいね。
02|データダウンロード
02-01|許諾事項
データは、AfterEffects 2022で作成したものになります。古いバージョンを使用している場合は、エラーが発生する場合がありますので、ご了承ください。
AfterEffectsについては、使用プラグインなしで、標準エフェクトのみで作成しています。
02-02|禁止事項
二次配布、再配布、素材の販売、無断転載、シェア利用等は禁止します。
個人・商用ともに、ご自由にお使いください。
著作権は放棄しておりませんので、素材データの複製譲渡や再配布、販売等著作権を侵害する行為は禁止します。
データ販売になりますので、返品返金はご遠慮ください。
ここから先は
¥ 800
この記事が気に入ったらサポートをしてみませんか?