テキストアニメーション

レスポンシブなNewsPicks風テキストアニメーション

やっぱりテキストを挿入するときは、そのままポンとのせるだけでは味気ないなということでNewsPicks風テキストアニメーションを作成してみました。

ノード構成はこちらからダウンロードできますので、自由にご利用ください。マクロ化したほうが便利かなと思ったのですが、すんなりいかなそうだったので未着手です^^

ノード構成とアウトプットであるテキストアニメーションを見ると簡単そうに見えるのですが、使いやすいようにと思ってテキストのWrite Onに合わせて背景が追従するように設定するのが鬼のように難しかったです^^;

※下図のように、テキストのWrite Onに従って背景も左から追従してくれると思いきや、テキストは左から表示されて、背景は中心から左右に広がるように表示されるという全然ダメな挙動を修正するのにかなりの時間を使いました。

ポイントは以下のとおりです。

  • 基本構成はテキストと背景(Background)を2枚重ね
  • Backgroundのサイズはテキストの幅に合わせて変化するよう、RectangleのWidthとHeightに以下のExpressionを設定
【Width】
(Text1.Output.DataWindow-Text1.Output.DataWindow)/Text1.Output.OriginalWidth
【Height】
(Text1.Output.DataWindow-Text1.Output.DataWindow)/Text1.Output.OriginalHeight
  • 実際には上記ExpressionをCustomTool(Controll)に登録してControll.RefWidthやControll.RefHeightとしてRectangleのWidth、HeightのExpressionに登録
  • Write OnがゼロのときにBackgroundがなぜか画面いっぱいになってしまうのでRectangleのLevelに以下のExpressionを設定(テキストの長さがゼロのときのみLevelをゼロ(非表示)にする)
    • 原因がよくわからなかったので対処療法です^^;
iif(Text1.End==0,0,1)
  • ここまでの設定だと、先にご説明したWrite Onの位置ずれの問題が発生してしまうのでRectangleのCenterに以下のExpressionを設定(後ろのRectangleはちょっとずれるようにX方向にオフセットを追加)
Point((Text1.Output.DataWindow/Text1.Output.OriginalWidth)+((Text1.Output.DataWindow-Text1.Output.DataWindow))/2/Text1.Output.OriginalWidth,0.5)

サラッと書いていますが、最後のRectangleのCenterに設定したExpressionを導くのにかなり時間がかかりました。もっと良い方法があるかもしれませんが、考えた流れとしては以下のような感じです。

  1. テキストは始点から終点に向かって表示される
  2. 背景は中心点から左右に向かって表示される
  3. テキストの動きを中心点を軸に考えると、始点から始まってX軸が0.5の座標まで移動すると考えることができる(終点は0.5)※テキストを真ん中に配置する想定です
  4. なので、RectangleのCenterに対してテキストの始点から始まって中心点で終わるようなExpressionを入れてあげる

正直なところ論理的に説明できない部分もあるのですが、いろいろと足したり引いたり2で割ったりしていい塩梅の結果が得られました笑

レスポンシブアニメーションの作り方や、Expressionに関する情報はNsFarmさんのこちらのYouTube動画を超絶参考にさせていただきました。(この情報がなかったら無理だったと思います!)

以上です!