UI 动画插件(DoTween)

官方API与官网下载地址：http://dotween.demigiant.com/documentation.php

Paste_Image.png

这个插件是用来设置UI动画的，关于如何使用下面我们来看看，先导入DOTween资源包。要使用我们需要在脚本中引用程序集 using DG.Tweening;
下面我们来看看几个方法:

//下面这个方法表示对变量myValue做一个动画 （通过插值的方式去修改一个值的变化）
//也就是说向量myValue这个值在两秒之内从Vector3.zero变成new Vector3(10,10,10).
//这里可以应用到Transform上，可以让一个游戏对象或者UI在多久之内从一个Position移动到另一个Position的改变。
public Vector3 myValue=Vector3.zero;
DOTween.To(()=>myValue,x=>myValue=x,new Vector3(10,10,10),2);

UI进入屏幕和倒播等动画

下面我们做一个实例来学习其他的使用方法。我们创建一个Butten单击的时候让一个面板从屏幕外进入到屏幕内。再单击的时候回播让它在返回屏幕外。
首先我们创建一个Butten和一个Image，然后我们在Butten上添加脚本MyButten。然后我们写入下面代码

   //这个是任务面板Plane的RectTransform
    public RectTransform panelTransform;
    public bool isIn = false;
    private void Start()
    {
        //让panelTransform从当前局部位置 动画到0，0，0的位置，动画进入屏幕 时间为1S.
        Tween tween = panelTransform.DOLocalMove(Vector3.zero, 0.3f);
        //Tweener对象保存这个动画的信息 每次调用do类型方法都会创建一个tweener对象，这个对象是dotween来管理
        //因为每次DOLocalMove后都会将其自动销毁，所以我们把SetAutoKill自动销毁设置为false;
        tween.SetAutoKill(false);
        tween.Pause(); //暂停动画


       //表示当前位置的X在一秒移动到X为5的位置
        //transform.DOMoveX(5, 1);

        //加上From()方法表示从目标位置X为5的地方在一秒移动到当前位置
        //transform.DOMoveX(5, 1).From();

        //下面From默认为false,如果为true的话那5就是相对值，也就是表示从目标位置X为5+（当前位置的X值）的地方在一秒移动到当前位置
        //transform.DOMoveX(5, 1).From(true);
    }
//点击Butten的方法
    public void OnClick() {
        if (isIn == false)
        {
            //panelTransform.DOPlay();//播放动画
            panelTransform.DOPlayForward();//向前播放动画
            isIn = true;
        }
        else {
            //让panelTransform动画进离开屏幕 
            panelTransform.DOPlayBackwards();//倒播动画
            isIn = false;
        }
    }

然后我们将按钮点击事件的方法和RectTransform 给其赋值这样就OK了，下面我们看看效果

37分11秒.gif

设置动画曲线

下面我们可以看到有很多的曲线运动方式我们可以先随便选一个试试效果看看，我们就选InElastic试试看吧。

Paste_Image.png

里面有很多动画的曲线可以去控制并且可以控制动画循环的次数，方法为以下
tween.SetLoops(2);//表示动画循环两次

5点0分1秒.gif

还可以在动画播放结束后执行一个事件方法

  tween.OnComplete(OnTweenComplete);//表示动画播放完后执行某个事件方法
   public void OnTweenComplete() {
        Debug.Log("动画播放完成");
    }

动画生命周期函数

Paste_Image.png

OnComplete//当动画完成之后
OnKill//当动画被销毁时
OnPlay//当动画播放时
OnPause//当动画暂停
OnRewind//当动画重置时
OnStart//当动画第一次播放
OnStepComplete//当上一次动画播放完
OnUpdate//当动画更新时

对话框文字动画与屏幕震动效果

 private Text text;
    private void Start()
    {
        text = this.GetComponent();
        text.DOText("欢迎来到幽暗森林，欢迎来到幽暗森林",4);
    }

5点53分55秒.gif

transform.DOShakePosition(1, new Vector3(1, 1, 0));//随机震动   参数一表示时间，参数二表示震动强度

6点6分46秒.gif

颜色与渐变动画

private Text text;
    void Start () {
        text = GetComponent();
        //设置颜色渐变，由黑变红
        text.DOColor(Color.red, 4);
        //设置Alpha透明渐变
        text.DOFade(1,2);//参数一为透明值，1为不透明，参数二为时间.
    }

6点18分44秒.gif