パスのトリミング

製品

学ぶ

会社情報

コミュニティ

✍️

注意事項

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

パスのトリミングは、モーショングラフィックスやベクターベースのアニメーションに、より深い動きを加えるための効果的な技術です。これにより、時間の経過に沿ってパスに沿ったストロークのトリミングや描画をアニメーション化し、動きや変形の錯覚を生み出すことができます。この技術を使うことで、シェイプや線の特定の部分を表示または非表示にし、動的な視覚効果を作り出すことが可能です。

パスのトリミングを作成

トリムパスメニューの開き方

パスのトリミング効果を適用したいシェイプを描画します。シェイプは、単純な長方形、円、またはカスタムベクターパスなどが使用できます。
プロパティパネル内にあるエフェクトの隣にあるシンボルをクリックして、パスのトリミング機能にアクセスします。これによって、パスのトリミングのツールボックスが開きます。
再生ヘッドを任意の開始点まで移動させます。通常は0秒にします。
パスのトリミングの開始と終了を100%に設定します。
再生ヘッドを任意の終了点まで移動させます。
パスのトリミングの開始点を0%に設定し、終了点を100%に設定します。トリミングが0%になった時点で、線が可視化されます。
再生ボタンを押します。

✍️

注意事項

パスのトリミングを用いたアニメーションで塗りを使う場合は、特に複雑なアニメーションや特定のシェイプに対して注意が必要です。デザインやアニメーションによっては、予期しない視覚効果が生じる場合があります。

例えば、塗りがパスのトリミングのアニメーションに正しく対応していない場合、望ましくない色の変化や、シェイプの形状の不規則性が起こる可能性があります。さらに、パスのトリミングのアニメーションでパスを削除する場合、塗りの色もパスと一緒に削除され、意図しない消失効果が生じることがあります。

常に、パスのトリミングアニメーション全体を通して塗りが想定通りに動作するように、十分にテストしてください。

デフォルトでは、シェイプは0%で始まり、100%で終わりますが、これらの値を調整することで、トリミングの開始点と終了点の位置を変更することができます。両方のポイントを100%に設定すると、パスが完全にトリミングされ、キャンバス上で見えなくなります。一方、両方のポイントを0%に設定すると、線が見えなくなります。

オフセット

オフセットを使ったパックマンアニメーションの作成

上記の例では、オフセットとキーフレームを設定することで、パックマンのようなアニメーションを作成しています。これにより、複雑な反復パターンを作成でき、開閉動作のような動的なエフェクトに最適です。オフセットを20%から開始し、開始点を10%、終了点を100%に設定しました。そして、連続する各キーフレームでは、20%から100%の範囲を適用してアニメーションを作成しました。この手順を、オフセット値を変えずに繰り返します。

トリムパスのオフセットプロパティは、アニメーションが始まるパス上の点を指します。これにより、パスに沿ったトリムアニメーションの開始位置を制御できます。トリムパスのアニメーションは、このオフセットの位置から始まり、アニメーションが進むにつれてパスに沿って進行します。

オフセットを0%に設定すると、パスのトリミングはシェイプの開始点から始まります。つまり、パスの表示部分が図形の開始点からスタートします。オフセット値を増やすと、トリムの開始点がパスに沿って移動します。たとえば、オフセットが50%に設定されている場合、トリムはパスの途中から始まり、シェイプの後半部分のみが表示されます。

パスのトリミングモード

パストリミングモードの違いを紹介

パスのトリミングモードは、パスのトリミングアニメーションが時間の経過に従ってパスを表示したり消したりする際の挙動を調整するオプションや設定です。これらのモードは、アニメーションが進行するにつれて、開始点と終了点がどのように変化するのかを決定します。

パスのトリミングを適用するには、すべてのシェイプをコンテナにグループ化し、そのコンテナに対してパスのトリミングを適用します。モードを切り替えるには、ドロップダウンメニューを使用します。

パスのトリミングには、主に2つのモードがあり、パスを同時にトリミングするか、個別にトリミングするかを選択できます。

同時にトリミング

このモードでは、パスのトリミングアニメーションの開始点と終了点が、パスに沿って同時に移動します。アニメーションが進行するにつれて、パスの表示部分が異なる位置で開始し、終了することで、同期した表示または消去の効果が生まれます。

このモードは、アニメーションが同じ速度かつ同じ挙動でパス全体を均等に表示または消去したい場合に使用されます。

個別にトリミング

このモードでは、パスのトリミングアニメーションの開始点と終了点を個別にコントロールすることができます。アニメーションが進行するにつれて、パスの開始位置と終了位置を独立して調整することが可能です。これにより、パスの表示や消去の方法において、より柔軟性と創造性が得られます。例えば、一方から他方へパスを描いたり、独自のパターンで消去する効果を作成することができます。