前回：DOTween完全に理解するその2 Transformアニメーション編

今回解説するアニメーション

今回は主にUIに関するアニメーションを解説していきます。
UI系のアニメーションもかなりお手軽にアニメーションが作れるのでとても便利です。

開発環境
Unity:2019.4.0f1
DOTween:v1.2.335

DOColor

var image = GetComponent<Image>();
image.DOColor(Color.Red, duration);

現在値から設定したColorへRGBの値を変更します。
対象コンポーネントはImage,Text,Outline,Graphicです。

ImageとTextはGraphicの派生クラスなので
例えばDOColor()をターゲットに対して行うコンポーネントを作る場合、
GraphicをGetConponent()してDOColor()を実行するように実装すれば、
Image用とText用を別々に作らなくて済みます。
Outlineは派生クラスではないので別に必要があります。
　
また、DOBlendableColor()というAPIがあります。
意味はDOBlendableMove（）とかと同じで、値の代入ではなく加算を行います、

DOGradientColor

[SerializeField] private Gradient to;
void Start(){
    var image = GetComponent<Image>();
    image.DOGradientColor(to, duration);
}

対象コンポーネントはImageのみです。
Gradientを引数に渡してグラデーションでColorの変更を行います。
ゲーミング的な表現に使えると思います。カードの枠をオーラみたいにするのとかにも良さそう。

DOFade

var image = GetComponent<Image>();
image.DOFade(0, duration);

対象コンポーネントはCanvasGroup,Graphic,Image,Text,Outline
意味はそのままアルファ値を操作します。
DOColor系と同じくtargetのcolorを変更する為、競合します。
その場合は「Fadeの処理順を後にする」「targetを別にする」などの工夫が必要になります。

DONormalizedPos系

var scroll = GetComponent<ScrollRect>(); 
scroll.DONormalizedPos(vector2, duration, snapping);
scroll.DOHorizontalNormalizedPos(1, duration, snapping); //横方向
scroll.DOVerticalNormalizedPos(1, duration, snapping);   //縦方向

対象コンポーネントはScrollRectのみです。
終点を0〜1で指定します。スクロール方向や基準点はScrollView側の設定を使用します。
snapping=trueの場合、整数未満の位置を無視して「カクっとスクロール」します。

DOText

var target = GetComponent<Text>();
target.DOText( text, duration, richTextEnable, scrambleMode,scrambleChars);

対象コンポーネントはTextのみです。
指定した文字列を順次表示するアニメメーションで、テキスト表示なんかに使えるかもしれません。
scrambleModeは非表示部分にランダムな文字を表示する下の設定になります。

サンプルgifのCustomは「X」をscrambleCharsに設定しています。
Numeralsを使えば、リザルトでのスコア表示なんかにも使えるかと思います。

ただ、非表示文字の切り替えは毎フレーム行なっているようです。
なのでtimeScaleを変更しても文字の切り替えは遅くなりません。
timeScaleを小さな値にしても「正しい文字列が表示される間隔」が長くなるだけです。

DOValue

var target = GetComponent<Slider>();
target.DOValue(to, duration, snapping);

対象コンポーネントはSliderのみです。
snappingはDONormalizedPos系と同じく「小数点以下を無視します」
サンプルgifの左側はsnapping=trueにしています。

DOFillAmount

var target = GetComponent<Image>();
return target.DOFillAmount(to, duration);

対象コンポーネントはImageのみです。
ImageTypeがFilledの場合、その設定を利用つつFillAmountの値を変更します。

サンプルgifは
アニメーションしないImage(白)の前にアニメーションをするImageを3つ配置して
DelayをかけながらDOFillAmount()を行なっています。
「DOFillAmount」のTextは、左詰めにしたTextに対して同じくDOText()を使用してみました。

まとめ

今回はUIに関するDOTweenの解説を行いました。
前回のTransformに作用するTweenと違い、ほとんどの場合は個別のUIに作用します。
あまり深く考えずに使える為、Transform系よりはつまずくことが少ないと思います。

今回UI編ではあるのですがRectTransfrom系とLayoutElement系を解説しませんでした。
これらは他のTweenと比較しても特殊なのと、特に面白い使い方が思いつかなかったので解説しませんでした。
また機会があったら記事にしようかなと思います。