はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】AnimationとAnimatorでテキストにアニメーションを付けてみる

はじめに

今回はAnimationとAnimatorでテキストにアニメーションを付けてみる記事になります!

下の画像のようなよくありそうなアニメーションを作ってみたいと思います。

f:id:hanaaaaaachiru:20190512143108g:plain

また別の方法としてテキストにアニメーションを付けようと思ったとき、Tween系を使うと簡単にアニメーションを付けることができます。

私のオススメはDoTweenで、無料版と有料版の2つあります。有料版ではTextMeshProにも簡単にアニメーションを付けられるので、かなり便利です。


ただAnimationClipAnimatorの使い方を知っていて損はないと思うし、こちらの方が便利な場合もあると思います。

ということで早速やっていきましょう!

Animationをつくる

Animationを作成するためにまずはAnimationウィンドウでの操作が必要です。
Window -> Animationをクリック。

f:id:hanaaaaaachiru:20190512013409p:plain

f:id:hanaaaaaachiru:20190512013436p:plain

アニメーションをさせたい対象を選択した状態で、createをクリックします。

f:id:hanaaaaaachiru:20190512014518p:plain

f:id:hanaaaaaachiru:20190512014528p:plain

下から上に移動する動きを付ける

まずは下から上へ移動する動きを付けたいと思います。
Add PropertyからAnchored Positionを右のプラスボタンから追加します。テキストのようなRect Transformの場合はAnchored Positionでy座標を移動できることに注意してください。

f:id:hanaaaaaachiru:20190512015132p:plain

また今回のy軸だけを移動するので、Anchored Position.xを右クリックをしてDelete Keyしちゃいましょう。

f:id:hanaaaaaachiru:20190512015330p:plain

次に実際にどのくらいy座標を移動するか決めたいと思います。
Anchored Position.yを選択した状態で左下のCurvesをクリックします。これでかなり視覚的に分かりやすく移動を制御することができます。

f:id:hanaaaaaachiru:20190512020002p:plain

Animationウィンドウには録画機能があります。これで簡単に動作を記録することができます。
左上の赤い●ポチをクリックします。

f:id:hanaaaaaachiru:20190512020302p:plain

f:id:hanaaaaaachiru:20190512020352p:plain

するとインスペクター上のRectTransform.yが赤く表示されているはずです。またAnimationウィンドウ上で0.00が選択状態(白いラインがある)になっていることも確認しておきましょう。

この状態でRectTransform.y-50を代入します。するとカーブに変化が表れているはずです。

f:id:hanaaaaaachiru:20190512020736p:plain

f:id:hanaaaaaachiru:20190512020659p:plain

終わったら左上の赤い●ポチを押し、録画モードを終了します。そしてちゃんとアニメーションが録画できてるかAnimationウィンドウ内の再生ボタンを押して動作を確認してみましょう。

f:id:hanaaaaaachiru:20190512021456g:plain

色が透明から不透明に変える

今回はテキストの表示にTextMeshPro UGUIを用いています。個人的にはこれを使ったほうがいいと思いますが、普通のTextの場合でもほとんど同様にできるはずです。

前回の同じようにAdd PropertyからTextMeshPro UGUI -> Colorを選択。

f:id:hanaaaaaachiru:20190512140909p:plain

TextMeshPro UGUI .Colorが選択され、Animationウィンドウ上で0.00が選択状態(白いラインがある)のことを確認した後、左上の録画ボタンを押します。そしてTextMeshPro UGUIコンポーネントのVertex Colorから透明を選択しましょう。

f:id:hanaaaaaachiru:20190512141551p:plain

f:id:hanaaaaaachiru:20190512141505p:plain

それができたら、今度はアニメーションの最後のところを選択して(私の場合は1:00)、同様にTextMeshPro UGUIコンポーネントのVertex Colorから不透明を選択します。

f:id:hanaaaaaachiru:20190512141833p:plain

録画モードを終了して、Animationウィンドウの再生を押してみると・・・。

f:id:hanaaaaaachiru:20190512142012g:plain

無事動いているようですね!

Animatorコンポーネントをアタッチする

対象のTextのゲームオブジェクトにAnimatorが自動でアタッチされているはずです。(なければ自分でアタッチする)

f:id:hanaaaaaachiru:20190512142710p:plain

ここのControllerに先程作成したAnimation Controllerを選択すると・・・。

f:id:hanaaaaaachiru:20190512143108g:plain

さいごに

これでテキストにアニメーションをつける一通りの操作ができました。
ただAnimation Controllerの設定も結構慣れが必要だと思うので、また次の記事で紹介をしたいと思います!