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

  • 20
    Like
  • 0
    Comment

実行環境

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

DOTweenについて

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();
    }
}

sequence1.gif

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();
    }
}

sequence2.gif

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));
    }
}

sequence3.gif

待機時間を挟む

一定時間経過後に次の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();
    }
}

interval_sample.gif

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()));