AppleEvent2020 「いいね」
2020年9月のAppleEventのアニメーションは「多段階のグラデーション」が中心的役割を果たしていました。
Twitterのいいねアニメーションも同様のコンセプトを持ったAppleEvent特別版に変更され、多くの人が目にしたと思います。それを再現してみましょう。
柳に蛙
Liquid Smartphone
題名
作成
作例
関連
作成日 : 2020-09-12
YouTube動画を隠す ◀
作成
1. ハートマークを作成
2種類「①：動かす用の線」「②：完成系の塗り」作成します。私はIllustratorで作成しました。
2. After Effectsへの読み込み
「①：動かす用の線」はマスクとして、「②：完成系の塗り」はシェイプとして使用します。
4. Trim Pathsを設定
Trim Pathsの開始と終了を動かして左下から反時計回りに描かれるようなアニメーションを作成します。
5. グラデーションの変更
④の動きに合わせて③のグラデーションも変更します。
6. スケールの変更
動きの開始→終了にかけて少し拡大し、最後にバウンドさせます
7. 塗りへの切り替え
スケールが最大から少し小さくなった所（頂点で切り替わると少し不自然）で塗りのハートを出現させます。
⑤で作成したスケールの変更をコピーして動きを同期させます。
⑤で作成したスケールの変更をコピーして動きを同期させます。
8. 装飾の追加
最初にもともと表示されている灰色のハートやカーソルを追加してより自然なアニメーションにして完成です。
作例