Unity

[Unity] DOTweenを使ってUI要素を点滅させる

More than 1 year has passed since last update.

こういうの作ります

blink_animetion.gif


Tweenとは


  • Tween(トゥイーン)はbetweenに由来する

  • 始点/終点を指定することで、間の挙動を補間してくれる

  • Easing(イージング)を指定する事で補間の緩急を調整することも可能


UntiyにおけるTweenを利用出来るアセット


DOTweenの特徴


DOTweenを使用する


  • http://dotween.demigiant.com/getstarted.php

  • 基本的に上記に従えば良い


    • (1) アセットストアからDL/インポート

    • (2) [Tools] => [Demigiant] => [DOTween Utility Panel] を開く


    • (3) [Setup DOTween ... ] を選択する (Unityのバージョンに合わせたライブラリをインポートするため)


    • (4) Tweenを適応したいScene で using DG.Tweening; する (DGはDemigiantの略)

    • (5) 必要に応じて、任意のシーンで1度だけ DOTween.Init を呼び出す

    • 引数を指定する事で、各種設定を行える

    • 宣言しない場合、default値を使用して初期化される

    • その場合、後ほど DOTween.Initを呼び出しても意味は無いっぽい



image

image


DOTween.Initの引数



  • DOTween.Init(bool recycleAllByDefault, bool useSafeMode, LogBehaviour logBehaviour) を指定出来る


recycleAllByDefault


  • この値が true の場合、tweenが破棄されず、プールされ再利用される

  • default (未指定時) は false

  • falseの場合でも DOTween.defaultRecyclable を更新する事で設定を変更出来る

  • falseの場合でも .SetRecyclable(true); を指定する事で任意のTweenのみをプールすることが出来る


useSafeMode


  • 僅かに挙動が遅くなるが、Tween中に破棄された場合に安全に処理してくれるらしい (挙動未確認)

  • default (未指定時) は true


logBehaviour


  • ログの出し方を変更出来る

  • default (未指定時) は LogBehaviour.ErrorsOnly

    LogBehaviour.ErrorsOnly: Logs errors and nothing else.
    LogBehaviour.Default: Logs errors and warnings.
    LogBehaviour.Verbose: Logs errors, warnings and additional information.



DOTweenを使ってUI要素を点滅させる

using UnityEngine;

using UnityEngine.UI;
using DG.Tweening;

[RequireComponent(typeof(CanvasGroup))]
public class BlinkCanvasGroup : MonoBehaviour
{
public float DurationSeconds;
public Ease EaseType;

private CanvasGroup canvasGroup;

void Start()
{
this.canvasGroup = this.GetComponent<CanvasGroup>();
this.canvasGroup.DOFade(0.0f, this.DurationSeconds).SetEase(this.EaseType).SetLoops(-1, LoopType.Yoyo);
}
}

blink.gif


DOFade


  • CanvasGroupの拡張メソッド

  • CanvasGroupのα値をDOFadeで制御することで、CanvasGroupがアタッチされたGameObject以下の小要素含めて点滅させることができる


SetEase


  • Easingを指定し、値の補間の緩急を調整する事で見え方が変わる

  • Easesing の種別の確認については以下のサイトがオススメ



ease_type.gif


SetLoops


  • ループの挙動および回数を変更出来る

  • 第一引数でループ回数を指定出来る


    • ただし -1 を指定する事で無限にループが続く



  • 第二引数でループの挙動を変更出来る


    • LoopType.Restart: 挙動が終了した時に値を始点に戻し、再度実行する

    • LoopType.Yoyo: ヨーヨーのように行き戻りを繰り返す

    • LoopType.Incremental: 挙動が終了した時に差分を endValue に追加しつつ再度Tweenを実行する



looptype.gif