[Unity] DOTweenのSequenceを使ってアニメーションを結合する

実行環境

• Unity5.6.0b1 (beta)
• DOTween v1.1.310

DOTweenについて

• 以下の記事にて紹介
  • [Unity] DOTweenを使ってUI要素を点滅させる

Sequenceを生成する

SequenceSample

using DG.Tweening;
using UnityEngine;

public class SequenceSample : MonoBehaviour
{
	void Start()
	{
	    Sequence sequence = DOTween.Sequence();
	}
}

SequenceにTweenを結合する

結合するために使用する関数は以下の通り

関数名
Append	Sequenceの最後にTween/Sequenceを追加する
Insert	指定した秒数後に再生開始するTween/Sequenceを追加する
Join	直前に追加されたTween/Sequenceと同時再生する
Prepend	Sequenceの最初にTween/Sequenceを追加する

SequenceSample

using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class SequenceSample : MonoBehaviour
{
    public CanvasGroup ResultCanvasGroup;
    public ParticleSystem Particle;

	void Start()
	{
	    Sequence sequence = DOTween.Sequence()
	        .OnStart(() =>
	        {
	            ResultCanvasGroup.alpha = 0.0f;
	            ResultCanvasGroup.transform.localScale = Vector3.one * 3.0f;
	        })
	        .Append(ResultCanvasGroup.DOFade(1.0f, 2.0f).SetEase(Ease.OutCubic))
	        .Join(ResultCanvasGroup.transform.DOScale(1.0f, 2.0f).SetEase(Ease.OutBounce));

	    sequence.Play();
	}
}

Sequence実行中にTween以外の動作を実行する

Callback関数を使用する

関数名
AppendCallback	Sequenceの最後にCallbackを追加する
InsertCallback	指定した秒数後に呼ばれるCallbackを追加する
PrependCallback	Sequenceの最初にCallbackを追加する

• 例えば、以下のようなケースで使うと良さそう
  • アニメーションの途中で sprite を変更する
  • アニメーションの途中でパーティクルを発火する

SequenceSample

using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class SequenceSample : MonoBehaviour
{
    public CanvasGroup ResultCanvasGroup;
    public ParticleSystem Particle;

	void Start()
	{
	    Sequence sequence = DOTween.Sequence()
	        .OnStart(() =>
	        {
	            ResultCanvasGroup.alpha = 0.0f;
	            ResultCanvasGroup.transform.localScale = Vector3.one * 3.0f;
	        })
	        .Append(ResultCanvasGroup.DOFade(1.0f, 2.0f).SetEase(Ease.OutCubic))
	        .Join(ResultCanvasGroup.transform.DOScale(1.0f, 2.0f).SetEase(Ease.OutBounce))
	        .InsertCallback(0.7f, () => Particle.Play()); // 再生0.7秒後に実行

	    sequence.Play();
	}
}

Sequence同士を結合する

• http://dotween.demigiant.com/documentation.php#creatingSequence
• Sequences can be contained inside other Sequences without any limit to the depth of the hierarchy.
• SequenceにはSequenceも結合可能
• 特定の条件の場合、再生する/しないを制御するのに役立つ

SequenceSample

using System.Collections.Generic;
using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class SequenceSample : MonoBehaviour
{
    public CanvasGroup ResultCanvasGroup;
    public ParticleSystem Particle;
    public List<Image> StarImageList;
    public int Score = 2;

	void Start()
	{
	    Sequence mainSequence = DOTween.Sequence();
	    Sequence resultSequence = DOTween.Sequence()
	        .OnStart(() =>
	        {
	            ResultCanvasGroup.alpha = 0.0f;
	            ResultCanvasGroup.transform.localScale = Vector3.one * 3.0f;
	        })
	        .Append(ResultCanvasGroup.DOFade(1.0f, 2.0f).SetEase(Ease.OutCubic))
	        .Join(ResultCanvasGroup.transform.DOScale(1.0f, 2.0f).SetEase(Ease.OutBounce))
	        .InsertCallback(0.7f, () => Particle.Play());

        // スコア数だけAppendする
	    for (int i = 0; i < Score; i++)
	    {
	        mainSequence.Append(StarSequence(StarImageList[i]));
	    }

	    mainSequence.Prepend(resultSequence);
	    mainSequence.Play();
	}

    Sequence StarSequence(Image starImage)
    {
        return DOTween.Sequence()
            .OnStart(() =>
            {
                starImage.transform.localScale = Vector3.one * 3.0f;
                starImage.color = new Color(0.9f, 0.9f, 0.4f, 1.0f);
            })
            .Append(starImage.transform.DOScale(1.0f, 1.0f).SetEase(Ease.OutBounce));
    }
}

待機時間を挟む

一定時間経過後に次のTween/Sequenceを実行したい場合は、Interval関数を使用する

関数名
AppendInterval	Sequenceの最後に待機時間を追加する (単位:秒)
PrependInterval	Sequenceの最初に待機時間を追加する (単位:秒)

IntervalSample

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class IntervalSample : MonoBehaviour
{
    public Image StarImage;

	void Start()
	{
	    Sequence fadeInSequence = DOTween.Sequence()
	        .Append(StarImage.DOFade(1.0f, 1.0f))
	        .Join(StarImage.transform.DOScale(1.0f, 1.0f))
	        .Join(StarImage.rectTransform.DORotate(new Vector3(0.0f, 0.0f, 360.0f), 1.0f, RotateMode.FastBeyond360));

	    Sequence fadeOutSequence = DOTween.Sequence()
            .Append(StarImage.DOFade(0.0f, 1.0f))
	        .Join(StarImage.rectTransform.DORotate(new Vector3(0.0f, 0.0f, -360.0f), 1.0f, RotateMode.FastBeyond360))
	        .Join(StarImage.transform.DOScale(3.0f, 1.0f));

	    Sequence sequence = DOTween.Sequence()
	        .OnStart(() =>
	        {
	            StarImage.transform.localScale = Vector3.one * 3.0f;
	            StarImage.color = new Color(
                    StarImage.color.r,
                    StarImage.color.g,
                    StarImage.color.b,
                    0.0f
	            );
	        })
	        .Append(fadeInSequence)
	        .AppendInterval(2.0f) // 2秒待機
	        .Append(fadeOutSequence);

	    sequence.Play();
	}
}

Sequence自体の再生時間を取得する

• Sequence.Duration() で取得出来る
• 公式Documentのサンプルにある通り、そのSequenceを横断する挙動を追加する際に使える (Insertにて Sequence.Duration() を指定)

// Insert a scale tween for the whole duration of the Sequence
mySequence.Insert(0, transform.DOScale(new Vector3(3,3,3), mySequence.Duration()));