您的位置:

深入了解DotweenPro

一、概述

在游戏开发过程中,动画是游戏中不可或缺的一部分。对于Unity开发者来说,“DotweenPro”可谓是顶级的动画插件,既简单易上手又功能丰富。DotweenPro与其他插件相比,有着更好的性能和更多的可自定义功能。下面我们将从安装与使用、Tween动画、序列动画、路径动画、高级功能等多个方面对DotweenPro进行详细的讲解。

二、安装与使用

安装DotweenPro有两种方法。第一种方法是导入“dotween pro.unitypackage”文件。在Unity的“Assets”中,选择“Import Package”中的“Custom Package”,然后导入“dotween pro.unitypackage”文件。


    Assets
        -- Import Package
            -- Custom Package 
                  -- dotween pro.unitypackage 

第二种方法是从Unity Asset Store下载插件。在Asset Store中使用关键字“DotweenPro”搜索,找到官方版本并下载。导入后即可直接使用插件中的API。

下面我们来看一下一个简单的例子:


    using DG.Tweening; // 引用插件中的命名空间
    
    public class CubeRotate : MonoBehaviour
    {
        void Start()
        {
            transform.DOBlendableRotateBy(new Vector3(0, 360, 0), 1f, RotateMode.FastBeyond360)
            .SetEase(Ease.OutQuad)
            .SetLoops(-1, LoopType.Incremental);
        }
    }

上述代码实现了一个“方块旋转”的动画:每秒钟绕Y轴旋转360度,动画无限循环、不断叠加。通过简单的几行代码,我们就实现了一个基本的Tween动画。

三、Tween动画

Tween动画可以通过插件中的“DOTween.To()”、“DOVirtual.Float()”、“DOVirtual.DelayedCall()”等API实现。常见的Tween动画类型有数值变化动画、颜色变化动画、位移动画、旋转动画、缩放动画等。

下面我们来看几个Tween动画的例子:

1. 数值变化动画

用于实现数值的平滑变化,比如从当前值到指定值的过渡。例如实现一个游戏计时器,使得每秒钟时间加1:


    using DG.Tweening;
    
    public class Timer : MonoBehaviour
    {
        private int time = 0;
        private Text timerText;

        void Start()
        {
            timerText = GetComponent
   ();
            DOTween.To(() => time, x => time = x, 60, 60f).OnUpdate(UpdateTimeText);
        }

        void UpdateTimeText()
        {
            int minute = time / 60;
            int second = time % 60;
            timerText.text = string.Format("{0:D2}:{1:D2}", minute, second);
        }
    }

   

上述代码将“time”从0平滑地变化到60,用时60秒。在变化过程中不断调用“UpdateTimeText()”函数更新时间文本。

2. 颜色变化动画

用于实现颜色渐变,从一个颜色平滑地过渡到另一个颜色。比如实现一个按钮变灰效果,需要将按钮颜色从普通状态过渡到灰色:


    using DG.Tweening;
    
    public class ButtonGray : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
    {
        private Image buttonImage;

        void Start()
        {
            buttonImage = GetComponent();
        }

        public void OnPointerEnter(PointerEventData eventData)
        {
            buttonImage.DOColor(new Color32(128, 128, 128, 255), 0.25f);
        }

        public void OnPointerExit(PointerEventData eventData)
        {
            buttonImage.DOColor(Color.white, 0.25f);
        }
    }

上述代码实现鼠标移入按钮区域,按钮颜色以0.25秒的时间从当前颜色过渡到灰色;鼠标移出按钮区域,按钮颜色以0.25秒的时间从灰色过渡到普通状态颜色。

3. 位移动画

用于实现位置的平滑变化,比如将一个物体移动到指定的位置处。例如将一个途经多个点的小车平滑地运动到目标点:


    using DG.Tweening;
    
    public class CarMove : MonoBehaviour
    {
        public Transform[] wayPoints;
        public float moveSpeed;
        private int currIndex = 0;

        void Start()
        {
            Move();
        }

        void Move()
        {
            transform.DOVector(wayPoints[currIndex].position, (wayPoints[currIndex].position - transform.position).magnitude / moveSpeed)
            .OnComplete(() =>
            {
                currIndex = (currIndex + 1) % wayPoints.Length;
                Move();
            });
        }
    }

上述代码实现一个小车按照途径多个点的路径平滑地移动,移动速度为“moveSpeed”。

4. 旋转动画

用于实现旋转的平滑变化,比如将一个游戏道具旋转指定的角度。例如将一把剑在重力方向上平滑地旋转90度:


    using DG.Tweening;
    
    public class SwordRotate : MonoBehaviour
    {
        private Vector3 rotateAxis = Vector3.right;

        void Start()
        {
            transform.DORotate(rotateAxis * -90f, 1f).SetEase(Ease.OutQuint);
        }
    }

上述代码将一把剑以Vector3.right为轴心,在1秒钟内平滑地旋转-90度。在旋转过程中应用“Ease.OutQuint”的缓动效果,使旋转更流畅。

5. 缩放动画

用于实现缩放的平滑变化,比如将一个游戏角色逐渐变大或变小。例如将一个宝箱缓慢地打开:


    using DG.Tweening;
    
    public class BoxOpen : MonoBehaviour
    {
        void Start()
        {
            transform.DOScale(Vector3.one * 1.5f, 1f).SetEase(Ease.OutElastic)
            .OnComplete(() => transform.DORotate(new Vector3(0, 180f, 0), 1f)).SetDelay(0.5f);
        }
    }

上述代码让一个宝箱在1秒钟内以“OutElastic”方式逐渐变大1.5倍。动画完成时,延迟0.5秒后宝箱会平滑地旋转180度。

四、序列动画

序列动画指的是一组动画依次播放,每个动画都是前一个动画播放完成后才开始播放。通过“DOTween.Sequence()”或“.Append()”、“.Prepend()”、“.Join()”等API可以轻松实现序列动画。

下面我们来看几个序列动画的例子:

1. 基本序列动画

比如先放大再缩小一个游戏道具:


    using DG.Tweening;
    
    public class PropScale : MonoBehaviour
    {
        void Start()
        {
            Sequence sequence = DOTween.Sequence();
            sequence.Append(transform.DOScale(Vector3.one * 1.5f, 0.5f).SetEase(Ease.OutQuint))
            .Append(transform.DOScale(Vector3.one, 0.5f).SetEase(Ease.OutQuint));
            sequence.SetLoops(-1, LoopType.Restart);
        }
    }

上述代码实现了一个游戏道具的序列动画效果:每0.5秒钟,游戏道具逐渐放大1.5倍,再逐渐缩小至原大小。动画无限循环。

2. 嵌套序列动画

比如金币在扔出去后,缓缓落下的效果:


    using DG.Tweening;
    
    public class CoinFall : MonoBehaviour
    {
        public Transform startPos;
        public Transform endPos;

        void Start()
        {
            Sequence sequence = DOTween.Sequence();
            sequence.Append(transform.DOMove(endPos.position, 1f).SetEase(Ease.OutQuad))
            .Join(transform.DORotate(new Vector3(-1080f, 5f, 45f), 1f, RotateMode.FastBeyond360))
            .Append(transform.DOMove(startPos.position, 1f).SetEase(Ease.InQuad)).SetDelay(1f)
            .Join(transform.DOScale(Vector3.one, 0.5f)).SetDelay(1f);
        }
    }

上述代码实现了一个金币扔出并最终落到指定位置的序列动画。金币运动过程中,金币旋转同时按照位置先向endPos移动,再移动至startPos。金币停止后,透明度逐渐变大至完全不透明。整个序列动画分为两个阶段,第一阶段持续1秒,第二阶段持续0.5秒。

五、路径动画

路径动画指的是物体沿着预先设置的路径进行运动的动画。

下面我们来看一个路径动画的例子:

1. 基本路径动画

比如在场景中实现一只沿着固定路径飞行的蝴蝶:


    using DG.Tweening;
    
    public class ButterflyFly : MonoBehaviour
    {
        public Transform[] wayPoints;
        public float moveSpeed;

        void Start()
        {
            transform.DOPath(BezierPath(), (wayPoints[0].position - transform.position).magnitude / moveSpeed)
            .SetEase(Ease.OutSine)
            .SetOptions(true)
            .OnComplete(() => { });
        }

        private Vector3[] BezierPath()
        {
            Vector3[] path = new Vector3[wayPoints.Length];
            for (int i = 0; i < wayPoints.Length; i++)
            {
                path[i] = wayPoints[i].position;
            }
            return path;
        }
    }

上述代码实现一只蝴蝶沿着经过多个点的预设路径移动。Path是通过Bezier曲线的方式实现。

六、高级功能

除了Tween动画、序列动画、路径动画等基本功能,DotweenPro还提供了许多高级功能,比如Tween绑定、DOTweenAnimation、Viscose Damp等,充分满足了复杂动画项目的需求。

1. Tween绑定

实现Tween时,可以通过绑定具体的物体或组件信息,来实现更多的动画变化。


    using DG.Tweening;
    
    public class BindCube : MonoBehaviour
    {
        public Transform startPoint;
        public Transform endPoint;

        void Start()
        {
            Sequence sequence = DOTween.Sequence();
            sequence.Append(DOTween.To(() => startPoint.position, x => startPoint.position = x, endPoint.position, 2f))
            .Join(DOTween.To(() => startPoint.localScale, x => startPoint.localScale = x, endPoint.localScale, 2f))
            .Join(DOTween.To(() => startPoint.GetComponent
   ().material.color, x => startPoint.GetComponent
    ().material.color = x, endPoint.GetComponent
     ().material.color, 2f