Unity插件之DoTween動畫插件(適合初學者)

引言:小生今日分享的是NB哄哄的動畫插件DoTween的學習記錄
適合人羣:Unity初學者
開啓學習之旅吧!

簡介:DoTween作爲一款動畫插件,前身是HOTween,支持可視化編輯,適用於2D和3D場景。
插件可以在資源商店購買,分爲免費版和收費版。這裏提供一個Pro版的!
官網:http://dotween.demigiant.com/ 
鏈接:https://pan.baidu.com/s/1miUzfy4 密碼:ba9j

1 導入插件

打開Tools-Demigiant-DoTweenUtilityPanel ,點擊Setup DoTween

2 常用API介紹

使用該插件需要引用 using DG.Tweening;

常用方法:
1.以DO開頭的方法:補間動畫的方法。例如:Transform.DOMoveX(10,1)
2.以Set開頭的方法:設置補間動畫的屬性。例如:Tweener.SetLoops(4, LoopType.Yoyo)
3.以On開頭的方法:補間動畫的回調函數。例如:Tweener.OnStart(callBackFunction)

DOTween.To()該方法需要使用lambda表達式,使用比較麻煩,一般採用以下的方法創建Tweener
案例:將向量(0,0,0)插值漸變到(10,10,0)漸變速度是由快變慢
public Vector3 value = new Vector3(0, 0, 0);

    private void Start()
    {
         //() => value表示返回獲取value值
        //x => value = x,x是通過目標值計算出來的插值,賦值給value
        //new Vector3(10, 10, 0)是目標值
        //2是到達目標值的時間
        DOTween.To(() => value, x => value = x, new Vector3(10, 10, 0),2);
    }

DOMove() 修改的是物體的世界座標
DOMoveX()只在X軸方向上移動,DOMoveY(),DOMoveZ()同理
//new Vector3(10, 10, 0)是目標值
//2是到達目標值的時間
cube.transform.DOMove(new Vector3(10, 10, 0), 2f);
DOLocalMove()修改的是物體的局部座標
DOLocalMoveX(),DOLocalMoveY(),DOLocalMoveZ()
cube.transform.DOLocalMove(new Vector3(10, 10, 0), 2f);
DOPlayForward()正播 DOPlayBackwards()倒播
    public GameObject cube;
    private bool isMove = false;

    private void Start()
    {
        //動畫對象Tweener播放完,默認銷燬
        Tweener tweener = cube.transform.DOLocalMove(new Vector3(10, 10, 0), 2f);
        tweener.SetAutoKill(false);//禁止自動銷燬動畫
        tweener.Pause();//暫停
    }

    public void OnClick()
    {
        if (!isMove)
        {
            cube.transform.DOPlayForward();//正播
            isMove = true;
        }
        else
        {
            cube.transform.DOPlayBackwards();//倒播
            isMove = false;
        } 
    }

DOText() 文字打印效果
text.DOText("雲想衣裳花想容,春風拂檻露華濃", 2);
DOColor()修改顏色
text.DOColor(Color.red, 2);
DOFade()透明度漸變
text.DOFade(1, 2);
DOShakePosition() 震動效果
Camera.main.transform.DOShakePosition(1, 0.5f);
From Tweens
//加上from()方法,默認false,表示從目標位置移動到當前位置
//如果爲true,表示相對距離,例如cube當前位置爲(2,0,0),則目標位置爲(2+5,0,0)
cube.transform.DOMoveX(5, 1).From();
SetEase()設置動畫曲線
舉例:
Ease.InBack 表示物體先向後一點,再向前播放
SetEase(Ease.InBack);
Ease.InBounce 相當於一個蓄力進入的效果
SetEase(Ease.InBounce);
如果想感受各種動畫曲線的效果,推薦下面網址:
(選擇某個運動曲線,小球會按當前曲線運動到鼠標點擊的位置)
SetLoops()設置循環播放次數
cube.transform.DOMoveX(5, 1).SetEase(Ease.InCubic).SetLoops(2);
OnComplete()當動畫結束時運行的事件函數
cube.transform.DOMoveX(5, 1).OnComplete(() => { Debug.Log("End"); });
OnStart()當動畫第一次運行時的事件函數
cube.transform.DOMoveX(5, 1).OnStart(() => { Debug.Log("Start"); });

3 Sequence

Sequence:相當於一個Tweener的鏈表,可以通過執行一個Sequence來執行一串Tweener,使用Sequence類可以方便的組織Tweens來製作複雜的過渡動畫。
Append(Tween tween)
在Sequence的最後添加一個tween。
AppendCallback(TweenCallback callback)
在Sequence的最後添加一個回調函數。
AppendInterval(float interval)
在Sequence的最後添加一段時間間隔。
Insert(float atPosition, Tween tween)
在給定的時間位置上放置一個tween,可以實現同時播放多個tween的效果,而不是一個接着一個播放。
InsertCallback(float atPosition, TweenCallback callback)
在給定的時間位置上放置一個回調函數。
Join(Tween tween)
在Sequence的最後一個tween的開始處放置一個tween。
Prepend(Tween tween)
在Sequence開始處插入一個tween,原先的內容根據時間往後移。
PrependCallback(TweenCallback callback)
在Sequence開始處插入一個回調函數。
PrependInterval(float interval)
在Sequence開始處插入一段時間間隔,原先的內容根據時間往後移。
案例:需要注意執行順序會影響效果
        //新建Sequence對象
        Sequence mySequence = DOTween.Sequence();
        //末尾添加補間動畫
        mySequence.Append(cube.transform.DOMove(new Vector3(5,5,0),2));
        //執行完上一個動畫,纔會執行這個
        mySequence.Append(cube.transform.DORotate(new Vector3(90, 90, 0), 2));
        //在0s位置上放置一個tween,可以實現同時播放多個tween的效果
        mySequence.Insert(0, cube.transform.DOScale(new Vector3(2, 2, 2), 2));
        //開始處插入一段時間間隔,原先的內容往後移2秒
        mySequence.PrependInterval(1);
以上代碼可以簡寫如下:
        Sequence mySequence = DOTween.Sequence();
        mySequence.Append(cube.transform.DOMove(new Vector3(5, 5, 0), 2))
                  .Append(cube.transform.DORotate(new Vector3(90, 90, 0), 2))
                  .Insert(0, cube.transform.DOScale(new Vector3(2, 2, 2), 2))
                  .PrependInterval(1);

4 可視化編輯

DOTween Animation組件,可視化快速做動畫

在需要做動畫的對象上添加DOTween Animation組件
AutoPlay —— 自動播放
AutoKill —— 自動刪除
Duration —— 持續時間
Ignorer TimeScale —— 忽略TimeScale 的影響
Ease —— 減緩(動畫曲線:枚舉類型)
loops —— 循環次數
ID —— 動畫的 ID 標示(通過ID,直接用代碼控制)
TO —— 到達目標位置(可通過點擊,設置Form)
Snapping —— 強烈 / 突然折斷
Relative —— 相對的

Events —— 事件
OnStart —— 初始化(只有在第一次運行)
OnPlay —— 運行開始(每次運行開始)
OnUpdate —— 運行時每一幀
OnStep —— 每一步(運行中的每個步驟)
OnComplete —— 動畫結束後調用

如果想看每個動畫的效果,請看這篇博客:

5 路徑編輯器

添加組件DOTweenPath

添加路徑點,效果如下

Shift + Ctrl : 添加路徑點
Shift + Alt : 刪除路徑點

Ease :動畫曲線類型
Pathtype : 路徑類型,路徑類型分爲線性或者利用CatmullRom插值算法形成的曲線
Pathmode : 路徑模式,主要是用於對物體三個方向上的旋轉的限制。
ClosePath :封閉路徑,如果勾選此屬性路徑將會形成一個封閉環。
LocalMovement :局部移動,如果勾選此屬性將會按照局部座標移動。
Orientation :運動朝向,分爲ToPath朝向路線,LookAtTransform朝向Transform,LookatPosition朝向點。
LookAhead :朝向前瞻性,數值越大,朝向越靠近更前方的點。
Relative :表示路徑點是否與物體爲相對的,勾選後,移動物體,可以一起移動路徑



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章