Linearity Move では、自動アニメート機能を使用して、Linearity Curve の静的ベクターデザインを一瞬でアニメーションにすることができます。

.curve ファイルを正しい方法で準備すれば、アートボードを Move に読み込ませるだけで、自動的にアニメーション化されます。

自動アニメートを使う

.curve ファイルを準備する

まず、Curve で作成したデザインを開きます。Move で何かを変更したいときに要素を簡単に見つけられるように、レイヤーや個別の要素にはそれぞれ一意の識別可能な名前をつけることをおすすめします。

アニメーションを考える

次に、どのようにアニメーションさせるかを決めましょう。絵コンテ (ストーリーボード) を描くように、アニメーションのそれぞれの動きや変更 (ステップ) を考えます。

考えたステップと同じ数になるまで、Curve でアートボードを複製してください。開始ステップを一番左のアートボードに、終了ステップを一番右のアートボードにして、それらが一列に並んでいることを確認してください。

アニメーションのステップを作成する

そして、アニメーションのステップ中に発生させたいことに基づいて、アートボードの「ステップ」をそれぞれ変更します。たとえば、あるシェイプを移動させたい場合は、そのシェイプが左のアートボードにあることを確認してから、次のアートボードでシェイプを動かします。

Move に引き継ぐ

アニメーションのステップを作成できたら、ファイルを保存し、.curve ファイルとして書き出します。Move を開いて、先ほどの .curve ファイルを読み込みます。ダイアログにアートボードが表示されるので、シーンビルダーエリアにドラッグします。各シーンの秒数や解像度などを設定し、読み込むボタンを押します。あとは、自動アニメートの魔法が起こるのを待ちましょう!

アニメーションを編集する

Linearity Move が自動で作成したアニメーションに変更を加える場合は、読み込んたシーンをダブルタップ / ダブルクリックして、シーン画面のタイムラインを開きます。ここにすべてのレイヤーと要素が表示されます。これらは .curve ファイルでの要素と同じ名前になっています。

まずは、タイムラインの上にある再生ボタンを押して、アニメーションを再生してみましょう。Move が自動で作成したアニメーションを見ることができます。

あとは、希望通りの出来栄えになるまで、アニメーションを調整しましょう。個々のキーフレームをドラッグし、その長さを変更したり、個々の要素を選択してより具体的に編集したりできます。

アニメーションをカスタマイズする方法の詳細については、アニメートモードのツールをお読みください。

アニメーションが完成したら、ファイルを書き出しましょう。これで準備完了です!