はじめに
今回はAnimationとAnimatorでテキストにアニメーションを付けてみる記事になります!
下の画像のようなよくありそうなアニメーションを作ってみたいと思います。
また別の方法としてテキストにアニメーションを付けようと思ったとき、Tween系を使うと簡単にアニメーションを付けることができます。
私のオススメはDoTween
で、無料版と有料版の2つあります。有料版ではTextMeshPro
にも簡単にアニメーションを付けられるので、かなり便利です。
ただAnimationClip
やAnimator
の使い方を知っていて損はないと思うし、こちらの方が便利な場合もあると思います。
ということで早速やっていきましょう!
Animationをつくる
Animation
を作成するためにまずはAnimationウィンドウ
での操作が必要です。
Window -> Animation
をクリック。
アニメーションをさせたい対象を選択した状態で、create
をクリックします。
下から上に移動する動きを付ける
まずは下から上へ移動する動きを付けたいと思います。
Add Property
からAnchored Position
を右のプラスボタンから追加します。テキストのようなRect Transform
の場合はAnchored Position
でy座標を移動できることに注意してください。
また今回のy軸だけを移動するので、Anchored Position.x
を右クリックをしてDelete Key
しちゃいましょう。
次に実際にどのくらいy座標を移動するか決めたいと思います。
Anchored Position.y
を選択した状態で左下のCurves
をクリックします。これでかなり視覚的に分かりやすく移動を制御することができます。
Animationウィンドウ
には録画機能があります。これで簡単に動作を記録することができます。
左上の赤い●ポチをクリックします。
するとインスペクター上のRectTransform.y
が赤く表示されているはずです。またAnimationウィンドウ
上で0.00が選択状態(白いラインがある)になっていることも確認しておきましょう。
この状態でRectTransform.y
に-50
を代入します。するとカーブに変化が表れているはずです。
終わったら左上の赤い●ポチを押し、録画モードを終了します。そしてちゃんとアニメーションが録画できてるかAnimationウィンドウ
内の再生ボタンを押して動作を確認してみましょう。
色が透明から不透明に変える
今回はテキストの表示にTextMeshPro UGUI
を用いています。個人的にはこれを使ったほうがいいと思いますが、普通のText
の場合でもほとんど同様にできるはずです。
前回の同じようにAdd Property
からTextMeshPro UGUI -> Color
を選択。
TextMeshPro UGUI .Color
が選択され、Animationウィンドウ
上で0.00が選択状態(白いラインがある)のことを確認した後、左上の録画ボタンを押します。そしてTextMeshPro UGUI
コンポーネントのVertex Color
から透明を選択しましょう。
それができたら、今度はアニメーションの最後のところを選択して(私の場合は1:00)、同様にTextMeshPro UGUI
コンポーネントのVertex Color
から不透明を選択します。
録画モードを終了して、Animationウィンドウ
の再生を押してみると・・・。
無事動いているようですね!
Animatorコンポーネントをアタッチする
対象のTextのゲームオブジェクトにAnimator
が自動でアタッチされているはずです。(なければ自分でアタッチする)
ここのController
に先程作成したAnimation Controller
を選択すると・・・。
さいごに
これでテキストにアニメーションをつける一通りの操作ができました。
ただAnimation Controller
の設定も結構慣れが必要だと思うので、また次の記事で紹介をしたいと思います!