Flintoを使ったイントロアニメーションの作り方を説明をします。
この記事を見れば下記の動画ようなイントロアニメーションを手軽に作れるようになります。これが理解できれば表現できるアニメーションの幅も広がるのでぜひトライしてみてください。
事前準備
Flintoデータのサンプルを用意しました、こちらからダウンロードをお願いします。
また、Flintoの基礎が知りたい方は下記の記事を参照してください。
イントロアニメーションの作成
では、早速イントロアニメーションを作成していきます。
1.グループ化
まず、アニメーションを作成する要素をグループ化します。
要素を選択して（command＋G）
2.アニメーション変化前の設定
ここではアニメーションの変化前の状態を作っていきます。
キャッチコピー部分の設定
キャッチコピー部分の設定をします。
- キャッチコピーのレイヤーを選択。
- Y軸を「422」に設定。
- 不透明度を「0％」に設定。
灰色と青色のオブジェクトの設定
灰色と青色のオブジェクトの設定をします。
- まず、灰色のオブジェクトを選択。（注意：グループではなくRectangleを選択）
- サイズ設定の幅を「0」に設定。
- 青色のオブジェクトも同じように設定。
3.ビヘイビアを追加
ビヘイビアの設定をしていきます。ビヘイビアとはオブジェクトの動作のことです。
- 1.で作成したグループを選択。
- 「ビヘイビア追加」を選択し、その後、新規ビヘイビアを選択。
4.新規状態を追加
プラスマークを押し、新規状態を追加します。
5.アニメーションの変化の設定
ここからアニメーションの変化を設定していきます。
キャッチコピーの設定
キャッチコピー部分のアニメーションを設定します。
- キャッチコピーのレイヤーを選択。
- Y軸を「322」に設定。
- 不透明度「100％」に設定。
- クラシックを選択。
- 時間を「500ms」に設定。
- 遅延を「1000ms」に設定。
時間＝アニメーション時間
遅延＝アニメーションの開始を設定した秒数分を遅らせる設定。
灰色のオブジェクトの設定
灰色のオブジェクトのアニメーションを設定します。
- 灰色のオブジェクトを選択。（注意：グループではなくRectangleを選択）
- サイズの幅を「1000」に設定。
- クラシックを選択。
- 時間を「500ms」に設定。
- 遅延を「500ms」に設定。
青色のオブジェクトの設定
青色のオブジェクトのアニメーションを設定します。
- 青色のオブジェクトを選択。（注意：グループではなくRectangleを選択）
- サイズの幅を「1000」に設定。
- クラシックを選択。
- 時間を「500ms」に設定。
6.タイマーリンクの設定
ここでは作成したアニメーションがしっかり動作するように、どういう条件でアニメーションが発火するのかを設定します。今回はタイマーリンクという設定で、表示されてから何秒後にアニメーションが開始するか設定します。
- 「初期状態」を選択。
- タイマーリンクを選択。
- タイムアウトを「0ms」に設定。
- ターゲットを押し、プルダウンメニューから「新規状態」を選択。
7.保存
「保存して閉じる」を押します。
8.プレビューで確認
「プレビュー」を押してアニメーションを確認します。
下記の動画と同じ動きになっていたら完了です。
イントロアニメーションの説明は以上になります。
イントロアニメーションまとめ
イントロアニメーションを考える際は、事前にどんなアニメーションをしたいのか明確に考えておくとスムーズに作成できます。
今回作成した内容で数値をいじってみたり、まだ使っていない機能を試してみると理解も深まると思います。まずは慣れることが大事なので色々作成してみましょう。
今回はこんな感じで終わろうと思います。最後まで読んでいただきありがとうございます。
次回はスクロールアニメーションに関しての記事を書くので読んでいただけると嬉しいです。
