【エクスプレッション】テキストアニメーションスピードを最初の１文字基準へ変更

アニメーションのイメージを崩さない尺調整が可能となります。

var mIdx = textIndex - 1;
var mDelay = 3;
var mStartTime = time - ( mIdx * mDelay * thisComp.frameDuration );
valueAtTime( mStartTime );

var mIdx = textIndex - 1;
var mDelay = effect("スライダー制御")("スライダー");
var mStartTime = time - ( mIdx * mDelay * thisComp.frameDuration );
valueAtTime( mStartTime );

使いどころ

テキストアニメーションのキーフレームは１文字ではなく総文字を対象としています。なのでキーフレーム幅を変えたり、テキスト数を増やすと、１文字単位で見るとスピードが変わってしまいます。印象が違ってしまいますよね…。

「キーフレームが示すのは１文字のアニメーションで、あとはそれに追従する」やり方があればいいのになあ、と思ったので作ってみました。

さらに動きを追加する場合、キーフレームタイミングが同じでよければ、そこに新プロパティのみを追加します。ちょっとキーフレームをずらしたい場合はアニメーターをコピーしてからキーフレームをずらし、プロパティを変えればOKです。様々なアニメーションを作成できます。

解説

テキストアニメーションのエクスプレッションはなかなか独特です。前提として『１文字１文字が独立したオブジェクト』だと考えて下さい。そしてエクスプレッションは１文字ずつ、全ての文字で処理されます。このとき『textIndex』という値をエクスプレッション中で使えば、この値（テキスト番号）はそれぞれ違う値なので、まったく同じ文のエクスプレッションでも違う結果にすることができるのです。

さて、まずは各文字の番号を変数に入れます。文字番号は１から始まるのですが、ゼロ始まりのほうが何かと使いやすいのでマイナス１しておいてます。

var mIdx = textIndex - 1;

ずらすフレーム数です。一応、３にしてあります。

var mDelay = 3;

１文字目はキーフレームそのままの位置を参照します。が、２文字目はキーフレーム位置よりも、設定した遅延フレーム分だけ“前”を参照するようにします。
そうすると、２文字目はインジケータがキーフレームのところに来ても、その前を参照しているのでまだ動きません。そして設定したフレーム分進むと、やっとキーフレームを参照して動き出す、ということです。
３文字目以降もその要領で『番号と設定フレームの掛け算』でどんどん“前”を参照させてやれば、順に遅れるってことですね。
下記の１行目が各文字の遅延させた指定時間で、２行目の『valueAtTime』でそこにある値を参照させています。

var mStartTime = time - ( mIdx * mDelay * thisComp.frameDuration );
valueAtTime( mStartTime );

作成したエクスプレッションの解説は以上です。

ついでに、エクスプレッションセレクターを追加したときにデフォルトで書かれている式の説明もしときますね。

selectorValue * textIndex/textTotal
//謎の式です。よくわからん状態になります。
//これはおそらく、「エクスプレッションセレクターにはこんなプロパティがありますよ」と
//わかるよう、全部のプロパティを載せているんだと思います。この式自体を使うことはないです。
//以下、３つのプロパティそれぞれの意味を書いておきます。

//selectorValue　
//このエクスプレッションセレクターの上に別のセレクターがあれば、その値を引き継ぎます（今回は使わない）。

//textIndex
//テキスト一文字ずつが固有にインデックスを持っています。これをうまく使って、一文字ずつ操作を可能にします。

//textTotal
//テキストの総文字数です（今回は使わない）。

以上です！
範囲セレクターでスピードを調整するのは意外と面倒ですよね。ぜひともお試しください。