DOTween路徑動畫詳解與使用

本文轉載自查看原文 2018-03-20 01:52 5594 轉載unity3d/ DoTween

原文地址： http://blog.csdn.net/xiaoguomumu/article/details/75243425

目錄(?)[+]

DOTween路徑動畫詳解與使用

轉載請注明出處

DOTween插件一般與UGUI結合使用

DoTween的運動方式

1、DOTween.To()方法

對變量做一個動畫，通過插值的方式修改一個值的變化

                 
using UnityEngine;
using System.Collections;
using DG.Tweening;//引入DoTween命名空間
public class GameStart : MonoBehaviour
{
​
    public Vector3 myValue = new Vector3(0, 0, 0);
    void Start()
    {
        //對變量做一個動畫，通過插值的方式去修改一個值的變化
        DOTween.To(() => myValue, x => myValue = x, new Vector3(10, 0, 0), 2);//用兩秒的時間從0,0,0變化到10,10,10
         //()=> myValue,表示返回值為myValue,x=>myValue=x,表示將系統計算好的x值(當前值到目標值的插值)賦給myValue,new Vector3(10,0,0),表示達到的目標值，2表示所需時間
    }

2、控制Cube和UI面板的動畫

1)、將腳本掛在Cube上，並且在Update方法中把myValue的值賦給當前位置，這樣便實現了Cube從當前位置移動到了目標位置

<wiz_code_mirror style="box-sizing: border-box;">

                 
using UnityEngine;
using System.Collections;
using DG.Tweening;//引入DoTween命名空間
public class GameStart : MonoBehaviour
{
​
    public Vector3 myValue = new Vector3(0, 0, 0);
    void Start()
    {
        //對變量做一個動畫，通過插值的方式去修改一個值的變化
        DOTween.To(() => myValue, x => myValue = x, new Vector3(10, 0, 0), 2);//用兩秒的時間從0,0,0變化到10,10,10
         //()=> myValue,表示返回值為myValue,x=>myValue=x,表示將系統計算好的x值(當前值到目標值的插值)賦給myValue,new Vector3(10,0,0),表示達到的目標值，2表示所需時間
    }
    void Update()
    {
        transform.position = myValue;//賦值給當前位置
    }

2)、UI面板的移動

新建任務面板，將腳本掛到UI面板上

                  
using UnityEngine;
using System.Collections;
using DG.Tweening;//引入DoTween命名空間
public class GameStart : MonoBehaviour
{
​
    private Vector3 myValue = new Vector3(1500, 0, 0);
   // public RectTransform TaskPanelTransform;//UGUI是通過RectTransform組件來控制移動屬性的
    void Start()
    {
        //對變量做一個動畫，通過插值的方式去修改一個值的變化
        DOTween.To(() => myValue, x => myValue = x, new Vector3(0, 0, 0), 2);//用兩秒的時間從0,0,0變化到10,10,10
         //()=> myValue,表示返回值為myValue,x=>myValue=x,表示將系統計算好的x值(當前值到目標值的插值)賦給myValue,new Vector3(10,0,0),表示達到的目標值，2表示所需時間
    }
    void Update()
    {
        transform.localPosition = myValue;//UGUI中坐標為局部坐標
    }
}

3)、對float類型的值進行修改

<wiz_code_mirror style="box-sizing: border-box;">

                 
    public float myValue2=0;
    void Start()
    {
        DOTween.To(() => myValue2, x => myValue2 = x, 10, 2);//表示將一個類型的值從0變為10，所需時間是2秒
    }

3、小案例：用按鈕控制UI面板的顯示和隱藏

將腳本掛在Canvas上

                 
             

                      
                  

                      
                  

                      
                  

                      
                  

                        
                    
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using DG.Tweening;
public class MyButton : MonoBehaviour
{
    private Button myButton;
    private RectTransform taskPanelTransform;//UGUI是通過RectTransform組件來控制移動屬性的
    private bool isShow = false;
    void Start()
    {
        myButton = transform.Find("Button").GetComponent<Button>();
        taskPanelTransform = transform.Find("Panel").GetComponent<RectTransform>();
        myButton.onClick.AddListener(OnClickBtn);//UGUI中監聽按鈕的方法
        Tweener tweener = taskPanelTransform.DOLocalMove(new Vector3(0, 0, 0), 1);//修改的是局部坐標,默認動畫完后會被銷毀
         //Tweener對象保存這個動畫的信息，每次調用do類型的方法都會調用一個tweener對象，這個對象使用DoTween來管理
        tweener.SetAutoKill(false);//把SetAutoKill自動銷毀設置為false
        tweener.Pause();//讓動畫在開始時暫停
    }
    public void OnClickBtn()
    {
        //   taskPanelTransform.DOMove(new Vector3(0, 0, 0),1);//DOMove()方法是Dotween擴展的方法，表示經過1秒運動到0,0,0的位置(修改的是世界坐標)
        if (isShow == false)
        {
           // taskPanelTransform.DOPlay();//讓動畫只播放一次
            taskPanelTransform.DOPlayForward();//讓動畫向前播放
            isShow = true;
        }
        else
        {
            taskPanelTransform.DOPlayBackwards();//倒放動畫的方法
            isShow = false;
        }
    }
}

                  
              

                  
              

FromTween:表示讓物體從目標位置移動到當前位置，即等同於播放反向的移動動畫

DOMoveX()、DOMoveY()、DOMoveZ()

如果只是讓物體的單個坐標移動，可直接用DOMoveX()、DOMoveY()、DOMoveZ()方法控制移動動畫,參數為(目標位置，所需時間)

<wiz_code_mirror style="box-sizing: border-box;">

                  
 transform.DOMoveX(5, 1);

From()

DoTween中任何調用動畫的方法后面都可以添加From(),表示從目標位置移動到當前位置

                 
transform.DOMoveX(5, 1).From();//表示讓物體從目標位置移動到當前位置

From(true)

表示目標坐標等於當前坐標加上當前目標坐標，如果物體當前坐標為2，那么這行代碼表示從目標位置(5+2),經過1秒，移動到當前位置(2)

<wiz_code_mirror style="box-sizing: border-box;">

                 
       transform.DOMoveX(5, 1).From(true);

DOLocalMoveX()、DOLocalMoveY()、DOLocalMoveZ()

表示局部坐標的位移動畫方法。 DoTween中所有對動畫的設置都是通過對象Tweener來完成的

                 
Tweener tweener=transform.DOLocalMoveX(0, 2f);

SetEase()

我們可以通過次方法來設置動畫的曲線，曲線動畫效果很多，在此僅做三個案例，其他的可以在系統給的枚舉類型中找

Ease.InBack

表示物體先向后一點，再向前播放

<wiz_code_mirror style="box-sizing: border-box;">

                 
            tweener.SetEase(Ease.InBack);

Ease.InBounce

相當於一個蓄力進入的效果

                 
tweener.SetEase(Ease.InBounce);

Ease.OutBounce

相當於一個落地之后的彈跳效果

<wiz_code_mirror style="box-sizing: border-box;">

                 
tweener.SetEase(Ease.OutBounce);

SetLoops()

我們可以通過此方法設置動畫循環的次數

                 
            tweener.SetLoops(2);//表示動畫的循環次數

OnComplete()

表示事件函數，當前動畫播放完后調用另一個方法，參數為需要調用的方法

<wiz_code_mirror style="box-sizing: border-box;">

                 
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            Tweener tweener = transform.DOLocalMoveX(0, 2f);//DoTween中所有對動畫的設置都是通過對象Tweener來完成的
            tweener.SetEase(Ease.OutBounce);//相當於一個落地之后彈跳的效果
            tweener.SetLoops(2);//表示動畫的循環次數
            tweener.OnComplete(OnClick);//表示當前動畫播放完之后調用的事件，相當於一個注冊方法，參數為需要注冊的方法
        }
    }
    void OnClick()
    {
        print("sss");
    }

DOText()

對話框文字動畫，該方法顯示打字機效果

                 
    private Text text;
void Start ()
{
    text = GetComponent<Text>();
}
void Update () {
    if (Input.GetMouseButtonDown(0))
    {
        text.DOText("轟隆隆……\n大地在顫抖，\n這是哪里？\n為什么我的頭會這么痛……\n……誰來救救我……",10);//表示再兩秒內顯示參數內文本(打字機效果)
    }
}

DOShakePosition()

屏幕震動效果，原理是讓攝像機進行隨機方向的位移，產生震動的假象

<wiz_code_mirror style="box-sizing: border-box;">

                 
    if (Input.GetMouseButtonDown(0))
    {
        transform.DOShakePosition(0.8f);//表示震動時間是0.8秒，震動方向隨機
        transform.DOShakePosition(0.8f,new Vector3(1,1,0));//表示震動時間是0.8秒，震動方向為x和y方向，震動強度為1
    }

DOColor()、DOFade()

顏色漸變和透明度漸變動畫

                 
    if (Input.GetMouseButtonDown(0))
    {
        text.DOText("轟隆隆……\n大地在顫抖，\n這是哪里？\n為什么我的頭會這么痛……\n……誰來救救我……", 10);//表示再兩秒內顯示參數內文本(打字機效果)
        text.DOColor(Color.blue, 1f);//漸變顏色動畫
        text.DOFade(1, 5);//漸變透明度動畫參數為(透明度,漸變時間),其中0為不透明，1為完全透明
    }

DoTween插件的可視化操作

在物體上添加DoTweenAnimation腳本

如何在腳本中控制DoTweenAnimation動畫腳本的播放

前提，腳本掛在面板上，並且取消DoTweenAnimation面板的自動播放和自動銷毀

<wiz_code_mirror style="box-sizing: border-box;">

                 
using UnityEngine;
using System.Collections;
using DG.Tweening;
using UnityEngine.UI;
​
public class Panel : MonoBehaviour
{
​
    private DOTweenAnimation tweenAnimation;
    private Button _btnButton;
    private bool isShow = false;
void Start ()
{
    tweenAnimation = GetComponent<DOTweenAnimation>();
    _btnButton =transform.parent.Find("Button").GetComponent<Button>();
        _btnButton.onClick.AddListener(OnClickBtn);
}
    void OnClickBtn()
    {
        if (isShow==false)
        {
            tweenAnimation.DOPlayForward();
            isShow = true;
        }
        else
        {
            tweenAnimation.DOPlayBackwards();
            isShow = false;
        }
    }
}

DoTweenPath路徑編輯器

在場景中添加一個Cube，在Cube身上添加組件DOTweenPath

參數：

Shift+Ctrl:添加路徑點

Shift+Alt:移除路徑點

AutoPlay:自動播放動畫

AutoKill:自動刪除動畫

Duration:動畫時長

Delay:延遲時長

Ease:動畫曲線，Linear:勻速

Loop:循環次數，-1表示死循環

LoopType:循環模式，Restart:重新啟動，表示走完路徑后從開始重新走；Yoyo:悠悠球:從開始走到結尾，再從結尾走到開始

Incremental:增量模式

PathType：路徑模式

CatmullRom：曲線；Linear:直線

ClosePath:封閉路徑，表示使路徑首尾相連

LocalMovement:是否是本地坐標

Orientation:運動朝向

ToPath:朝向路徑方向

Look At Transform:朝向一個目標物體

Look At Position：朝向一個目標位置

Relative:相對的，表示路徑跟隨物體移動

Show Indexs是否顯示索引

觸發事件和路徑點的坐標的設置

添加按鈕控制動畫的播放

在場景中添加Button，並且將Cube拖進Button的OnClick事件方法中選擇DOTweenPath的DOTogglePause方法，實現當點擊按鈕后開始播放動畫，再次點擊時會停止播放(前提：將DOTweenPath組件的AutoPaly和AutoKill選項取消選擇)