一度作ったシェイプアニメーションを繰り返して使いたい場合、一度作ったものをループさせて使い続ける方法があります。
ループさせるやり方は正解は一つだけではありません。
シェイプによってさまざまな方法があるので柔軟に使い分けしましょう。
ループ回転 するアニメーション
軌道上を回転する軌跡。同じような線ですが、ループさせる方法が違います。
左のアニメーションは中心点を軸に画像を360度回転させ続けています。
対して右のアニメーションは[線のトリミング]を使い、円形の輪郭線の始点と終点にキーフレームを打つことで始点と終点を移動しつづけています。
全く違うつくりの二つのアニメーションをループさせて永遠にアニメーションする方法をご紹介します。
回転し続けるexpression（エクスプレッション）
左の回転は【loopOut(Type=”cycle”) 】というエクスプレッションを使います。
[新規コンポジション]に[楕円形ツール]で正円を書きます。 [コンテンツ][追加]から[パスのトリミング]を選択し、[パスのトリミング1]の中にある[開始点]もしくは[終了点]を使って円弧を書きます。インジケーターを始点に移動し、[コンテンツ]の[トランスフォーム]の[回転]にキーフレームを打ちます。
インジケーターを終点にもっていき、[コンテンツ]の[トランスフォーム]の[回転]にある0×+0.0という表示を1×0.0に変更します。
こうすると、一回転で止まっていたアニメーションがループして動くようになります。
始点と終点の追いかけっこ【time * ループ】
こちらのアニメーションは、図形を回転させ続けるものではありません。
生まれては消える線を追尾させることで円のアニメーションを作っています。
[新規コンポジション]に[楕円形ツール]で正円を書きます。 [コンテンツ][追加]から[パスのトリミング]を選択し、[パスのトリミング1]の中にある[開始点]もしくは[終了点]を表示します。ここまでの手順は同じです。
インジケーターをタイムラインの始点にもっていき、キーフレームを100にします。
同様に終点も同じ位置からやや遅れた地点に100のキーフレームを打ちます。
タイムラインの終点の手前に開始点のキーフレームを0とします。
タイムラインの終了点にインジケーターを進ませ、[終了点]のキーフレームを0とします。
これで軌道上を円弧が移動するアニメーションができました。
この円弧をループさせるには[トランスフォーム]の[回転]を開いてエクスプレッション:回転の値を【time * 150;】に書き換えます。※150という数字は目安です。
数値を大きくすると早くなります。好みにより加減してください。
これで中身は全く別の二つのアニメーションが出来上がりました。
まとめ
よく使われるexpression（エクスプレッション）
回転し続ける→【time;】もしくは【-time ;】逆回転
ゆっくり回転し続ける→【time * 10;】※数字が大きくなると回転速度も速くなります。
そのほかに
- ランダムに点滅させる【random(50, 100);】【Math.floor(random(2)) * 100;】
- ゆっくり点滅する【Math.sin(time*2) * 100;】
- 一秒ごとに点滅する【Math.abs(Math.sin(time*6)) * 100;】
- ゆっくり揺らす【(time & 1) * 100;】
などというエクスプレッションもあるのでいろいろ試してみてはいかがでしょうか。
独立して稼げる動画クリエイターを目指すなら映像制作と実務案件を通して学べるスクールがあります
こんにちは、フルタニです。放送局で番組作りをしてました。 暗い動画を明るくする を書きます。