【Cavalry 学習15】文字入力アニメーション
本日はコチラの動画。
Flashing cursor and write on effect in Cavalry App
これは、書き込みエフェクトと点滅するカーソルを実現する方法の簡単な説明である。
主なポイントは点滅するカーソルであり、その上にどのようなエフェクトでも追加できるという点だ。
ここでは、ターミナルと検索ボックスを用意したので、それがどのように構成されているかを見てみよう。
まずは空のテキストシェイプから始める。そして、Formatting Inputsにスクロールしてテキストシェイプを追加する。
▼わかりやすかった機能説明の動画
このシェイプを「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」も適用したもの
Discussion