Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

実行環境

  • 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()));
unity-game-dev-guild
趣味・仕事問わずUnityでゲームを作っている開発者のみで構成されるオンラインコミュニティです。Unityでゲームを開発・運用するにあたって必要なあらゆる知見を共有することを目的とします。
https://unity-game-dev-guild.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした