パスのトリミング
シェイプレイヤに「パスのトリミング」を追加し、線が伸びたり、線分が移動するアニメーションをつくります。
「直線」が伸びていくアニメーション
パスのトリミングを追加したとき、「開始点 0％」、 「終了点 100％」 に設定されています。
このときの「％」は「パス上の位置」を表しています。（下図の直線を参照）
「0％」 はパスの「始まりの位置」、 「100％」はパスの「終わりの位置」です。
これは変化することはありません。 シェイプをつくった時点でパスの始まりと終わりが決定します。
これに対して、「開始点」は「パスを目に見える線として表示する始まりの点」のことです。
また、「終了点」は「パスを目に見える線として表示する終わりの点」ということです。
したがって、 「開始点」が「0％」の位置にあり、「終了点」が「100％」の位置にあることで「線全体が見える」ようになります。
基本的なパスのトリミングでは、 「開始点を0％に固定」し、「終了点を0％から100％に移動」するキーフレームを設定することで、線が伸びていくアニメーションをつくります。
線分が移動するアニメーションの設定
次に、伸びるだけでなく「線分」が移動するアニメーションを設定します。
直線の場合、パスのトリミングを使用しなくてもトランスフォームの移動でできてしまいますが、分かりやすい例として直線を使用します。
線分の移動は、簡単に言うと「開始点」も「終了点」もアニメーションの初めで「0％」に、終わりで「100％」に設定し、「開始点」の初めと終わりのキーフレームだけをタイムラインで後ろへずらします。
「開始点」の移動を「終了点」より遅らせることで「線分」が見えるようになります。
同じ内容ですが、動画による解説です。
円・曲線も同じ
円でも曲線でも作り方は同じです。
直線で設定したパスのトリミングを円や曲線にコピー＆ペーストするだけでもアニメーションができます。