相见恨晚！Unity插件——DoTween介绍

前言：

今天来学习一下大名鼎鼎的Unity插件——DoTween。

 

---

DoTween

DOTween是一款针对Unity的快速高效、类型安全的面向对象的补间动画引擎，并且对于C#用户做出了很多的优化。

和学习任何东西一样，我们先将它的官网加入收藏，有问题可以随时看文档。

导入资源，预览效果

我这里分享了一个DoTween以及一个示例的Unity场景

链接：https://pan.baidu.com/s/1bOI-kqvLEESrGZzukjuiyQ
提取码：0ds2

我们发现，使用的DOTween插件后，transform居然能够点出DOMove方法，这是因为C#的拓展性，使其和Unity的一些类能产生链接，是不是感觉很神奇。因为这些特性，使我们在使用起来非常简单易懂，想让哪个物体动，就让它的transform组件来调用DOTWeen的方法就可以了。

关于如何实现C#的扩展，可以参考https://blog.youkuaiyun.com/LIQIANGEASTSUN/article/details/50518053

 

位置、旋转、缩放

• DOMove：移动位置
  • to：目标位置
  • duration：持续时间
  • snapping：若true，则将过程中所有值对齐成整数。
• DORotate：旋转
  • RotateMode
    • RotateMode.Fast(默认)：旋转最短的路径，不会超过360度。
    • RotateMode.FirstBeyond360：旋转将会超过360度。
    • RotateMode.WorldAxisAdd：使用world轴和高级精度模式
    • RotateMode.LocalAxisAdd：将给定的旋转添加到转换的本地轴上。
  • duration：持续时间
  • endValue：结束位置（欧拉角）
• DOScale：改变缩放
  • to：目标缩放
  • duration：持续时间
• DOJump：跳跃
  • endValue：末位置
  • jumpPower：跳跃力度
  • numJumps：跳跃次数
  • duration：持续时间
  • snapping：若true，则将过程中所有值对齐成整数。
• DOPunchPosition：冲击（对应的还有Rotation的、Scale的）
  • punch：冲击到的位置
  • duration：持续时间
  • vibrato：频率
  • elasticity：弹性
• DOLookAt：旋转目标使朝向某处
  • towards：朝向
  • duration：持续时间
  • axisConstraint：对旋转值添加某个轴向上的约束（默认AxisConstraint.None）
  • up：定义向上的轴向
• DoBlendableMoveBy：设置的值不是最终位置而是相对运动量（效果与setRelative相同），这种方式允许其他的DOBlendableMove在同一个目标上协同工作。

 

颜色、透明度

颜色：

DOTween改变颜色的主要思路是通过物体材质球的_Color属性来改变颜色，我们可以找到物体的材质球，右击Edit来查看有没有_Color属性，如果没有则需要你收到指定材质的属性。

示例：

标准使用：

GetComponent<MeshRenderer>().material.DOColor(Color.red, 2f);

如果对应材质球没有_Color属性，则我们要手动指定property

GetComponent<MeshRenderer>().material.DOColor(Color.red,"_TintColor", 2f);

以上是物体材质的颜色修改方法

对于UI的话：

Text text = GetComponent<Text>();
text.DOColor(Color.red, 2f);

对于UI中的图片也是一样的道理，很简单。

透明度：

透明度也是通过材质球来修改，很多物体的材质球不支持透明度，建议更换材质球，然后代码里手动指定好属性：

GetComponent<MeshRenderer>().material.DOFade(0,"_TintColor", 2f);

 

动态渐变：

gradient：倾斜度

我们还可以指定一个渐变关系，让物体去渐变：

创建一个Gradient对象：

    public Gradient gradient;

然后在Unity面板里，就可以给它指定颜色。

然后

    void Start()
    {
        GetComponent<MeshRenderer>().material
            .DOGradientColor(gradient,2f);
        
    }

就可以让物体按照渐变板信息去渐变。

 

 

震动效果

震动效果分为Position、Rotation、Scale三个方向，这里以Rotation为例：

transform.DOShakeRotation(2f, 1, 10, 90);

参数是：持续时间、振幅（震动力度）、频率、随机范围（0~180，最好不要超过90）、snapping（是否对齐到整数）、fadeout（渐出动画）

 

 

路径动画

路径动画，使游戏物体沿给定路径移动。

• pathType：
  • Liner–路径是笔直的；
  • CatmullRom–曲线路程
• pathMode：路径模式，该参数主要针对LookAt选项设置。
  • Ignore（忽略所有的LookAt设置）
  • Full3D–3D效果中LookAt方向不受限制
  • Sidescroller2D–lookAt方向只能左右转
  • TopDown2D–LookAt方向只能上下转
• resolution：路径的分辨率（在线性路径中无效）；更高的分辨率可以得到更详细的曲线路径，但代价更高。默认值是10，但是如果在路径点之间没有明显的长曲线，那么5的值通常就足够了
• gizmoColor.gizmo画线路径的颜色

示例：

    void Start()
    {
        //路径移动
        Vector3[] path = new Vector3[] {
            new Vector3(0,0,0),
            new Vector3(3,32,1),
            new Vector3(7,59,37),
            new Vector3(0,0,77)};
        transform.DOPath(path,5,PathType.CatmullRom,PathMode.Full3D);
    }

当然，我们可以直接添加一个组件来做路径——DOTweenPath。

给物体添加组件后，按下Ctrl+Shift来添加路径点，ALT+Shift来删除路径点就可以编辑路径。

这种方法就不需要脚本了，直接一个组件解决：

组件面板中可以调整循环方式、路径点信息、朝向等各种信息

 

 

动画序列（Sequence）

sequence：一系列、一连串、一组镜头

我们可以将动画存放在一个动画队列中，让它以队列的形式播放

    void Start()
    {
        //创造队列动画
        Sequence sequence = DOTween.Sequence();
        //加入动画
        sequence.Append(transform.DOMoveX(1, 3));
        //加入同时动画
        sequence.Insert(0,transform.DOScaleX(3,3));
        //加入间歇
        sequence.AppendInterval(2);
        //加入动画
        sequence.Append(transform.DOMoveX(5.408844f, 3));
        //加入同时动画
        sequence.Insert(5, transform.DOScaleX(1, 3));
    }

 

加入同时动画可以不用Insert，而使用Join，这个会直接在当前动画同时播放某动画

而且它不像Insert一样需要计算时间

sequence.Join(transform.DOScaleX(3,3));

Join只和最上面的Append的动画是同时播放。

另外，我们还可以给动画队列添加回调方法，这个回调方法就会加入Sequence队列中

        //加入动画
        sequence.Append(transform.DOMoveX(1, 3));
        //加入同时动画
        sequence.Join(transform.DOScaleX(3,3));
        sequence.AppendCallback(() =>
        {
            print("回调");
        });

也有一个不受队列影响的InsertCallback，不管sequence队列进行到了哪一步，他都会在第n秒调用回调方法（n是第一个参数）

        sequence.InsertCallback(0,() =>
        {
            print("第0秒调用");
        });

总结一下：

• Append：想sequence队列添加动画，按照队列顺序播放
• Join：在上一个加入sequence动画队列的动画播放中播放动画
• Insert：不受sequence队列动画影响，在指定时刻播放动画。

 

动画的控制、回调

给一段代码，你很快就能明白了：

    void Start()
    {
        Tweener tweener=transform.DOMoveX(10, 2)
            .SetEase(Ease.Linear)
            .SetLoops(2, LoopType.Restart)
            .SetDelay(0)
            .SetAutoKill(false);
        tweener.OnComplete(() =>
        {
            print("OnComplete");
        });
        tweener.OnKill(() =>
        {
            print("OnKill");
        });
        tweener.OnPlay(() =>
        {
            print("OnPlay ");
        });
        tweener.OnStart(() =>
        {
            print("OnStart");
        });
        tweener.OnPause(() =>
        {
            print("OnPause");
        });
        tweener.OnRewind(() =>
        {
            print("OnRewind");
        });
        tweener.OnUpdate(() =>
        {
            print("OnUpdate");
        });
    }

动画事件相关方法:

OnStart： 动画第一次播放时调用

OnPlay： 动画每次从暂停状态解除时调用(包括初次播放)

Pause： 动画暂停时调用一次

OnUpdate： 动画播放过程中每帧调用

OnStepComplete： 每次动画播放结束时调用(受循环次数影响)

OnComplete： 每次动画播放结束时调用(不受循环次数影响,且倒放时不适用)

 

 

 

---

实用示例

逐字显示：

void Start()
{
    Text text = GetComponent<Text>();
    text.DOText("有意思的事情", 5); //5秒时间将这段文字逐字显示
    text.DOColor(Color.red, 5); //颜色逐渐变红
}

文字显示的翻页效果

 void Start()
 {
     Text text = GetComponent<Text>();
     Tweener twe = text.DOText("下面是有奖竞猜:", 2);
     twe.OnComplete(() =>
     {
         text.text = "";
         text.DOText("富奸老贼是怎么死的?", 2);
     });
 }

 

---

 

 

商业转载 请联系作者获得授权，非商业转载 请标明出处，谢谢