LoginSignup
38

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-11-27

こういうの作ります

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
38