トリムパス

2 min read

トリムパスを使用すると、ストロークのどのくらいが見えるかをアニメーション化し、ラインがリアルタイムで描画されるように見える「描画オン」効果を作成できます。 これは、テキスト、イラスト、図表を明らかにするためのモーショングラフィックスで最も人気のある技術の一つです.

の特長 Path with partial trim visibleの特長 トリムエンドを0.5に設定した
Aパスは、ストロークの最初の半分だけを示す
の特長

仕組み

すべてのパスには3つのトリムプロパティがあります

プロパティ レンジ コンテンツ
トリムスタート 0 - 1 可視部が始まる場所(0 = パス開始)
トリムエンド 0 - 1 可視部が終わる場所(1 = パス端)
トリムオフセット 0 - 1 パスに沿って見えるウィンドウをシフト

trimStart = 0とtrimEnd = 1の場合、フルパス(デフォルト)が表示される。 これらの値を変更すると、ストロークの部分を非表示にします.

ドローオン効果

最も一般的な使用:それ自体を描くように見えるストローク.

  1. 可視ストロークでパスまたは形状を作成する
  2. キーフレームのアニメーションを追加します
    • 時間 0: trimEnd = 0 (目に見えない)
    • 時 2: trimEnd = 1 (十分に引かれる)
  3. タイムラインを再生して、パス自体を描画する

これは特によく機能します:

  • Cursive text は Cursive Font システムによって作成されます
  • 手描きイラスト 図面ツールで製作
  • Diagram コネクター アニメーションフローチャート用

部分的な明らかに

パスの一部だけを表示する:

  • trimStart = 0.2 および trimEnd = 0.8 を中間 60% を示すために置きます
  • 可視セクションを拡張または契約する両方の値を獲得
  • 隠れた部分は完全に見えない(透明なだけではありません)

スライド窓

パスに沿って移動するセグメントを作成します

  1. 固定窓のサイズ: trimStart = 0、trimEnd = 0.3
  2. Animate XQ 0から1までのQ
  3. 可視セグメントは、パスの長さ全体に沿ってスライドします

これは以下のような効果を生み出します

  • ローディングの表示器
  • スキャン/トレースアニメーション
  • レーストラックまたは進捗ライン効果

互換性のある項目

トリムパスは次のように動作します

項目タイプ インフォメーション
パス ライン、カーブ、フリーハンドのデッサン
複合パス 複数のサブパスを持つ複雑な形状
グループ グループ内のすべてのパスに適用されます
マスクグループ マスクを貼った商品を使用
の特長

ヒント: テキストで最高の描画オン効果のために、Cursive Fontシステムを使用します。 トリミングパスアニメーションに理想的なシングルストロークテキストパスを作成します.

の特長

他の特徴と結合して下さい

  • キーフレームエディタ - カスタムリースで時間をかけてトリムプロパティを合理化
  • 関連 - driven_byを使用して、他の項目プロパティにトリム値をリンクします
  • 時間式 - 数学式を使用して複雑なトリムパターンを作成する

ニュース

  1. 引き込み効果のためにEasysOutを使用-それは端で自然な減速を与えます
  2. Keepストローク可視 - トリムパスはストロークパスのみに影響します
  3. 打撃の幅を点検して下さい - より厚い打撃は引込み式のアニメーションのためによく見ます
  4. Stagger の複数のパス - 順序のパスを引く時間オフセットを使用して下さい
  5. フルスピードでのプレビュー - トリムアニメーションは遅い対通常の速度で異なる感じることができます

※関連:** キーフレームエディタ | フォントスタジオ | アニメーション