アニメーション

製品

学ぶ

会社情報

コミュニティ

✍️

注意事項

ご注意ください！Phaseでは、定期的にアップデートや改善を行っています。そのため、チュートリアルの内容が現在のアプリとは多少異なる場合があります。

Phaseのシンプルながら強力なアニメーションツールを使って、デザインに命を吹き込みましょう。アニメートモードを開き、タイムライン上の任意のポイントまで移動し、編集します。残りはPhaseにお任せください。

アニメートモード

アニメートモードへの切り替え

画面下にある アニメートボタン

を押して始めます。あるいは、

ボタンを押してアニメートモードのオン／オフを切り替えます。

アニメートモードでは、アニメートボタンの横にいくつか新たなアイコンが表示されます：

再生／一時停止：動画再生の基本操作です。
Space
で再生／停止を行うこともできます。
ループ：アニメーションが再生終了時に最初から再開されます。
再生速度：クリックすると、x0.25, x0.5, x1.0, x1.25, x1.5、および x2.0 で切り替えられます。

アイコンも重要ですが、アニメートモードでの大きな変化は、画面下部にタイムラインパネルが表示されることです。通常、Phaseでのアニメーション作成ではタイムラインを頻繁に使用するため、ここではその基本的な概要を紹介します。

タイムライン・インターフェース

アニメーションを最初から作成する場合、タイムラインには白い縦線だけが表示されます。これは再生ヘッドと呼ばれ、アニメーションの時間を示すマーカーです。再生ヘッドはドラッグして移動させたり、タイムラインの左端上にあるフィールドに時間を入力して固定時間に移動させたりできます。

一方、Lottieファイルがインポートされると、タイムライン上にいくつかの菱形が表示されます。これらはキーフレームであり、アニメーションにおいてレイヤーが変化するポイントです。レイヤーにキーフレームが設定されている場合、タイムラインの左側に新しいレイヤーパネルとして表示されます。

それぞれのキーフレームは、少なくとも一つのプロパティが調整されたポイントを表します。各レイヤーには、変更されたすべてのプロパティがネストされています。レイヤーを展開すると、キーフレームを持つすべてのプロパティの一覧が表示されます。

✍️

注意事項

キーフレームが0秒の位置に無い場合、アニメートモードが無効になっている時とプロパティは同じです。

アニメーション作成作業の大半はキーフレームの設定ですので、これについて詳しく見ていきましょう。

キーフレームの作成

Phaseでキーフレームを追加するのは、静的なデザインを作成するのと同じくらい直感的です。唯一の違いは、変更を行う前に、再生ヘッドをその変更が行われる予定の時間に移動させる必要があることです。

キーフレームを作成するには二つの方法があります。

方法 A: プロパティを変更してキーフレームを作成

要素の位置を調整して自動的にキーフレームを作成する

再生ヘッドをタイムライン上の任意のポイントに移動します。
要素を選択し、移動するか、プロパティのいずれかを変更します。
Phaseは新しい設定でキーフレームを自動的に作成します。

方法Aは、時間をかけてデザインを行うのと同じです。多くのクリックを必要としないため、使いやすい場合もあります。ただし、手動でキーフレームを作成する必要がある時もあります。

方法 B: キーフレームを手動で追加

手動入力によるキーフレームの追加

再生ヘッドをタイムライン上の任意のポイントに移動させます。
任意のプロパティにカーソルを合わせると、菱形のキーフレームインジケーターが表示されます。
アイコンをクリックします。
プロパティに変更が無い場合でも、Phaseはその時点でキーフレームを作成します。

方法Bは、アニメーションを遅らせる場合に最も有効です。たとえば、アニメーションが0秒からその後のある時点まで変化しない場合、そのプロパティを時間と共に維持するキーフレームを作成します。これにより、アニメーションの開始時にキーフレームがなくても、新しい最初のキーフレームとして機能することができます。

キーフレームの調整

キーフレームにスナップ

キーフレームをクリックすると、再生ヘッドが自動的にそれにスナップします。他にも、キーフレームを選択して修正する方法があります：

キーフレームをドラッグしてタイムライン上で移動させ、アニメーションのタイミングを変更します。
キーフレームの時点でパラメーターを変更し、その時間でアニメーションを更新します。
⌫ Backspace
または
Delete
を押してキーフレームを削除します。
キーフレームを選択し、後の時間に移動して、
Command ⌘
C
または
Ctrl
C
を押してコピーします。

キーフレームを右クリックすると、Phaseは次のオプションを表示します：

現在の時間に複製：現在の時間にキーフレームのコピーを作成します。再生ヘッドがキーフレームの現在の時間とは異なる時間に設定されている場合にのみ、複製が有効です。たとえば、1秒のキーフレームを基に新しいキーフレームを作成するには、
初期値にリセット：選択されたキーフレームのプロパティをアニメートモードが無効な時と同じ値に切り替えます。これは、ループ再生するアニメーションを制作する際に役立ちます。
キーフレームの削除：キーフレームを削除します。アニメーションは、削除されたキーフレームがないかのように再計算され、削除されたキーフレームの両側にあるキーフレームが接続されます。

補間

アニメーションを制作する際、キーフレームはさまざまな間隔で設置され、それによって、それぞれの時点でアニメーションがどのように表示されるのかが決定されます。それぞれのキーフレーム間において、Phaseは補間と呼ばれる処置を行い、アニメーションを自動的に構築します。

ここに、簡単なアニメーションがあります。0秒の位置にはキーフレームはありません。初期設定の黄色い円が表示されます。そして1秒の位置では、アニメーションが設定され、赤い菱形があります。アニメーションは、その時点で180度回転するように設定されています。

0 秒	0.5 秒	1 秒

0秒の位置と1秒の位置の間に、キーフレームはありませんが、Phaseはすべての時点の間に補間される塗りの位置と塗りの色を計算します。したがって、0秒の位置と1秒の位置の間にあるシェイプを見てみると、オレンジ色に塗りつぶされた角の丸い四角形が表示されるでしょう。

📖

詳細を読む

Phaseでは、補間を徐々に加速または減速させることで、一工夫加えることができます。この処理はイージングと呼ばれ、別途特集ページを掲載しています。