DOTween完全に理解するその3 UIアニメーション編

前回：[DOTween完全に理解するその2 Transformアニメーション編](https://qiita.com/BEATnonanka/items/b4cca6471e77466cec74)
# 今回解説するアニメーション
今回は主にUIに関するアニメーションを解説していきます。
UI系のアニメーションもかなりお手軽にアニメーションが作れるのでとても便利です。
![uiBasic.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/a7aee82c-80c5-34ae-d5ee-597cf0c23b0c.gif)
![ui2all.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/9f9dc252-ba70-8281-a646-de4ef88f9bca.gif)


|メソッド名|メモ|
|----|-----|
|DOColor|Colorの変更（Graphic,Image,Text,Outline）|
|DOGradientColor|Gradientを使用してColorを変更(Image)|
|DOFade|Alphaの変更(CanvasGroup,Graphic,Image,Text,Outline)|
|DONormalizedPos系|ScrollViewのスクロール位置を変更|
|DOText|Textに表示される文字列を表示していく|
|DOValue|Slider.Valueを変更|
|DOFillAmount|ImageのFilled設定を変更する|

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

# DOColor
```c#
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
```c#
[SerializeField] private Gradient to;
void Start(){
    var image = GetComponent<Image>();
    image.DOGradientColor(to, duration);
}
```
対象コンポーネントは**Imageのみ**です。
Gradientを引数に渡してグラデーションでColorの変更を行います。
ゲーミング的な表現に使えると思います。カードの枠をオーラみたいにするのとかにも良さそう。

# DOFade
```c#
var image = GetComponent<Image>();
image.DOFade(0, duration);
```
対象コンポーネントは**CanvasGroup,Graphic,Image,Text,Outline**
意味はそのままアルファ値を操作します。
**DOColor系と同じくtargetのcolorを変更する為、競合します。**
その場合は「Fadeの処理順を後にする」「targetを別にする」などの工夫が必要になります。

# DONormalizedPos系
![scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/025a24ab-9b3e-2c70-6204-d7ecdb38d877.gif)

```c#
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
![ui2text.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/91a60bb4-4b52-3f48-f1d3-70867f7da16c.gif)

```c#
var target = GetComponent<Text>();
target.DOText( text, duration, richTextEnable, scrambleMode,scrambleChars);
```
対象コンポーネントは**Textのみ**です。
指定した文字列を順次表示するアニメメーションで、テキスト表示なんかに使えるかもしれません。
scrambleModeは非表示部分にランダムな文字を表示する下の設定になります。

|Mode|メモ|
|----|-----|
|None|非表示部分は何も表示しない|
|Uppercase|大文字のみ|
|Lowercase|小文字のみ|
|Numerals|数字のみ|
|All|大文字小文字数字全て|
|Custom|scrambleChars内の文字を使用|
サンプルgifのCustomは「X」をscrambleCharsに設定しています。
Numeralsを使えば、リザルトでのスコア表示なんかにも使えるかと思います。

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

# DOValue
![ui2value.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/5b24ed24-1e7b-fadc-48dd-fec7552e0683.gif)

```c#
var target = GetComponent<Slider>();
target.DOValue(to, duration, snapping);
```
対象コンポーネントは**Sliderのみ**です。
snappingはDONormalizedPos系と同じく**「小数点以下を無視します」**
サンプルgifの左側はsnapping=trueにしています。

# DOFillAmount
![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203331/9bbcea99-1461-20a5-663a-b894c80e372b.gif)

```c#
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と比較しても特殊なのと、特に面白い使い方が思いつかなかったので解説しませんでした。
また機会があったら記事にしようかなと思います。