🙆‍♀️

【Cavalry 学習15】文字入力アニメーション

2025/01/13に公開

本日はコチラの動画。
Flashing cursor and write on effect in Cavalry App
https://www.youtube.com/watch?v=Xz-xw1mfbYQ

これは、書き込みエフェクトと点滅するカーソルを実現する方法の簡単な説明である。
主なポイントは点滅するカーソルであり、その上にどのようなエフェクトでも追加できるという点だ。
ここでは、ターミナルと検索ボックスを用意したので、それがどのように構成されているかを見てみよう。

まずは空のテキストシェイプから始める。そして、Formatting Inputsにスクロールしてテキストシェイプを追加する。

▼わかりやすかった機能説明の動画
https://youtu.be/aEcAkqYi8T8?si=oqXubLE2zVH_y1y8&t=262

このシェイプを「text」と名前を付けておく。そして、もう一つのテキストシェイプを追加し、こちらは「cursor」と名付ける。
これにより、それぞれの役割が分かりやすくなる。現時点で「CavalryCavalry」と表示されているのは、これらが連結されているからである。

この時一番親のMainレイヤーの入力欄には{1}{0}と入力されており、
1は子レイヤー 0は孫レイヤーに対応している

例えば、「hello world」と入力して、カーソルを単にShiftキーを押してエンターキーの上の小さな線を入力するだけで変更できる。

書き込みエフェクトを実現するには、「String Manipulator」をクリックし、「Resize String」にスクロールする。
そして、それをスワイプしてアニメーションさせれば完成だ。ゼロから始めて、間違いがないか確認しながらアニメーションを作成する。
これをアニメーションさせていくと、目的のエフェクトが得られる。

色々なメニューがあったので一通り変えてみる。
意味がわかったものだけキャプチャあり。笑
Transition Stringは使えそうだなぁと感じた。

▼Change String Case:大文字小文字を変更

▼Join String:文字列の連結

Regex - 正規表現を使用して文字列やその一部に一致させ、結果を基に操作を行う。

Replace String - 文字列の一部を別の文字列に置き換える。

【今回使用】Resize String - 文字列の長さを変更する。

▼Shuffle String - 文字列をランダムに並べ替える。

Sub-String - 文字列の開始点や終了点を指定して切り取る。

▼Transition String - 一つの文字列から別の文字列に移行させる。

ーーー
動画では0と60フレームでキーフレームを打ち、パーセンテージを0→100へ変えてアニメーションしている。

次にカーソルについてだが、アルファ値とフィルをアニメーションさせるだけである。

| ←この記号の透明度を100%と0%でアニメーションにして、点滅しているように見せる

フレーム0で開始し、フレーム10まで進み、さらにフレーム20まで進む。

フレーム10で100%
フレーム20で0%に戻す

その後、グラフエディタに移動し、選択した状態で右クリックして「Curve Interpolation」を「Step」に設定する。

初めてのグラフエディタ〜!

▼Curve Interpolation(補完)をStepにする前の動き

▼Stepにした後の動き

また、下部のループオプションを利用してループを設定することで、カーソルの点滅を実現する。

キーフレームをすべて選択して、右のループオプションを押すと自動で繰り返してくれる。(おー!)

これで基本的な部分は完成である。ターミナルに関しては、完全に異なるフォントを使用した点が唯一の違いである。
ここでは「LED Calculator」というフォントを使用した。
グリフブラウザを開き、下にスクロールするとこのフォントが表示されるので、それを右クリックしてコピーし、貼り付ければ完成である。
手法自体は全く同じである。

▼完成🎉

▼色を変えて、今回でてきた「Transition String」も適用したもの
https://youtu.be/wH0Yq-jO2bE

Discussion