Skip to main content
Participant
February 18, 2025
Question

同じアニメーションを別の内容のテキストに反映させるやり方

  • February 18, 2025
  • 1 reply
  • 178 views

この動画の0:25からの歌詞アニメーションを再現したいです。

https://www.youtube.com/watch?v=wePCOoU7bSs

 

いちばん上の「ピンクが好き」の分はなんとか作れました。

同じアニメーションが別の歌詞で何度も繰り返されて、

歌詞の長さによって背景の角丸の長さが変わります。

背景自体もスケールのアニメーションが掛かっています。

 

・歌詞の長さに追従して角丸の長さが自動で変わる

・アニメーションの内容は全部同じ

 

上記をできるだけ時短でクリアする方法はありますか?

1フレーズずつ地道にやるほかありませんか?

教えていただけましたら幸いです。よろしくお願いいたします。

    1 reply

    Community Expert
    February 19, 2025
    テキストボックスのサイズを自動で調整するためには、エクスプレッションが必要になります。
     
    テキストとシェイプのレイヤーのアンカーポイントに下記のエクスプレッションを追加すれば、双方の位置の値を同じにして正確に位置を合わせることができます。
    let w = thisLayer.sourceRectAtTime().width;
    let h = thisLayer.sourceRectAtTime().height;
    let t = thisLayer.sourceRectAtTime().top;
    let l = thisLayer.sourceRectAtTime().left;
    [l + w / 2 , t + h / 2]

     

    長方形シェイプの「サイズ」に下記エクスプレッションを追加すればシェイプのサイズをテキストの文字数に合わせることができます。
    let t = thisComp.layer("テキストレイヤー名").outPoint;
    let w = thisComp.layer("テキストレイヤー名").sourceRectAtTime(t).width;
    let h = thisComp.layer("テキストレイヤー名").sourceRectAtTime(t).height;
    [w + 80, h + 50] //   数値はボックスの余白サイズ
     
    アニメーションは、アニメーションプリセットに保存すれば再利用ができます。
     
    添付動画のアニメーションは、プリセットの「テキストバウンス」を適用してから、数値を変更しています。