自学Unity游戏开发之UGUI中DoTWeen插件详细解析（一）

    经过几天对DoTween动画插件的学习，把所学的知识做出一个总结，本文将分三篇播客详细的介绍DoTween中的控制动画的基础方法以及其中的各种选项的说明,其中还会以小Demo方式实现效果。

    一、DoTween的介绍以及下载地址

        简单来说DoTween就是一款使用UGUI制作UI界面的一款动画插件，假如你使用过NGUI的话，就会知道NGUI中集成了许多动画，减轻的开发者的负担。而DoTween就是专门为UGUI而生的动画制作插件。

        DoTween在Unity下载地址：https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676

下载完毕后，拖拽到Unity中并在代码中引用DG.Tweening这个命名空间就可以使用了。

二、使用DoTween对变量进行动画。

    首先在Unity创建01_GetStart场景,并添加一个Cube并向其添加一个GetStart脚本.引入命名空间后便可以开始写脚本.                                  

GetStart脚本:

public Vector3 myValue = new Vector3(0, 0, 0); //这句代码是创建一个Vector3位置变量

void Start () {  //在Start方法中书写调用动画代码.

//这句代码其实是两个方法,第一个方法是返回MyValue,然后通过new Vector3与myValue计算出一个差值x,然后把x赋值个给myValue

   DOTween.To(() => myValue, x => myValue = x, new Vector3(10, 10, 10), 2);

}

下面我们启动Unity看效果:myValue从0---->10,第一个知识点就结束了.

  

三、对Cube以及UI面板的控制动画

    我们依旧在GetStart脚本中进行代码书写,要对Cube进行移动的话，不就是对Cube中TransFrom组件里的Position属性进行控制吗？所以其中的一种移动实现方法就是把我们第一节所写的向量在Update()方法中进行更新。每一帧都保持Cube的位置信息与Vector3的位置信息保持一致。

public Transform cubeTransform;//创建一个Transform组件,记得在控制面板中把Cube拖拽到cubeTransform中,不然会报空指针.

void Update () {
   cubeTransform.position = myValue; //更新Cube的位置信息

}

    进行UI面板的动画,我们首先在Unity创建一个Image作为面板,并把其移动到外边具体操作如下:

然后设置Cube中的myValue中的值为UI面板中的值,如下:

然后开始写脚本:

public RectTransform taskPanelTransform;//创建RectTransform组件,并要在Unity中拖拽赋值

        DOTween.To(() => myValue, x => myValue = x, new Vector3(0, 0, 0), 4);//改变UI面板的位置信息到0,0,0位置

void Update () {
        taskPanelTransform.localPosition = myValue;//在Update中更新位置,实现动画效果

}

 动画运行中动画结束

四、动画的快捷播放

    我们重新创建一个叫02_shortCutsWay的场景，并在这个场景中添加一个按钮以及一个Image作为面板,效果如图：

然后给Button添加MyButton脚本,并开始写代码.

 public RectTransform Panel; //定义RectTransfrom组建，记得要在unity中拖拽赋值。
    public void OnClick()  //按钮的点击方法，在unity赋值,如下图
    {
        //让panel的transform从当前位置移动到0，0，0位置，时间为1秒
        Panel.DOLocalMove(new Vector3(0,0,0),1);

    } 

然后启动unity,便可以看到面板从外进入到里面,效果如下图

五、动画的前方和后放

    动画播放完毕后,DoTween会帮我们自动销毁,所以我们假如要多次用一个动画时,必须把该动画的自动销毁设置为false,下面即为实现的代码, 代码在第四节中MyButton脚本中书写:

 public RectTransform panelTransform;
    private bool isIn = false; //标准位
    void Start() {
        Tweener tweener = panelTransform.DOLocalMove(new Vector3(0, 0, 0), 0.3f);//默认动画播放完成会被销毁
 //Tweener对象保存这个动画的信息 每次调用do类型的方法都会创建一个tweener对象，这个对象是dotween来管理
        tweener.SetAutoKill(false);// 把autokill 自动销毁设置为false
        tweener.Pause();//暂停动画,使其一开始不播放
    }
    public void OnClick() {
        if (isIn == false) {
            panelTransform.DOPlayForward();//前放
            isIn = true;
        }
        else {
            //让panel离开屏幕
            panelTransform.DOPlayBackwards();//倒放
            isIn = false;
        }      

    }

效果如图,点击按钮,面板进入:

再次点击按钮,面板离开: