作者:四五二十

大家好。

今天我們一起來(lái)研究一下DOTween動(dòng)畫插件。

對(duì)于該插件官網(wǎng)上的介紹是：“DOtween是一種快速，高效，完全類型安全的面向?qū)ο蟮膭?dòng)畫引擎?！?/p>

將它導(dǎo)入U(xiǎn)nity中，可以很方便快速地幫我們完成許多動(dòng)畫效果。本篇文章主要將通過一些小案例來(lái)介紹DOTween的使用方法和主要功能。

DOTween導(dǎo)入：

打開Unity創(chuàng)建一個(gè)新工程,將下載好的DOTween插件直接拖入Project面板：

基本用法

一.移動(dòng)動(dòng)畫

創(chuàng)建一個(gè)小球，位置設(shè)為世界坐標(biāo)原點(diǎn)（0，0，0），掛上此腳本：

using DG.Tweening; //引入命名空間

public class DOTWeenTest : MonoBehaviour

{

? void Start()

??? {

??????? transform.DOMove(new Vector3(4, 3, 0), 3); //腳本物體3秒從當(dāng)前位置移動(dòng)到世界坐標(biāo)(4,3,0)位置

??? }

}

?

我們發(fā)現(xiàn)，使用的DOTween插件后，transform居然能夠點(diǎn)出DOMove方法，這是因?yàn)镃#的拓展性，使其和Unity的一些類能產(chǎn)生鏈接，是不是感覺很神奇。因?yàn)檫@些特性，使我們?cè)谑褂闷饋?lái)非常簡(jiǎn)單易懂，想讓哪個(gè)物體動(dòng)，就讓它的transform組件來(lái)調(diào)用DOTWeen的方法就可以了。

DOMove相關(guān)方法：

世界坐標(biāo)上移動(dòng)：transform.DOMove

本地坐標(biāo)上移動(dòng)：transform.DOLocalMove

世界坐標(biāo)的X軸上移動(dòng)：transform.DOMoveX

本地坐標(biāo)的X軸上移動(dòng)：transform.DOLocalMoveX

通過以上的方法，我們學(xué)會(huì)了制作移動(dòng)動(dòng)畫，但這個(gè)動(dòng)畫會(huì)自動(dòng)播放，并且，播放完了就銷毀了，不能重復(fù)使用，后面我們會(huì)通過一些設(shè)置來(lái)避免。

二.From()方法的使用

2秒時(shí)間從世界坐標(biāo)（2，2，0）處回到自身當(dāng)前位置：

transform.DOMove(new Vector3(2, 2, 0), 1).From();

三.動(dòng)畫正放與倒放

1.場(chǎng)景中創(chuàng)建兩個(gè)按鈕，來(lái)控制動(dòng)畫的播放順序：

2.為小球掛上腳本：

using DG.Tweening; //引入命名空間

public class DOTWeenTest : MonoBehaviour

{

??? Tweener twe; //聲明一個(gè)Tweener對(duì)象

??? void Start()

??? {

??????? twe = transform.DOMove(new Vector3(3, 4, 0), 2);//將動(dòng)畫保存在Tweener對(duì)象中

??????? twe.Pause();//暫停,防止自動(dòng)播放?

??????? twe.SetAutoKill(false);//關(guān)閉動(dòng)畫自動(dòng)銷毀?

??? }

??? //創(chuàng)建兩個(gè)方法事件,控制前放后倒放

??? public void Forward()

??? {

??????? twe.PlayForward(); //該動(dòng)畫正放

??? }

??? public void Back()

??? {

??????? twe.PlayBackwards(); //該動(dòng)畫倒放

??? }

}

?3.將兩個(gè)方法分別掛在各自按鈕上，運(yùn)行程序：

其它方法：

Pause()： 暫停動(dòng)畫

SetLoops(3)： 循環(huán)3次

四.設(shè)置動(dòng)畫曲線

在以上我們展示的動(dòng)畫效果中我們，我們通過觀察可以看到，物體在播放移動(dòng)動(dòng)畫時(shí)速度是由快到慢（倒放除外），這種現(xiàn)象是由動(dòng)畫播放時(shí)的動(dòng)畫曲線決定的，我們是可以通過修改動(dòng)畫曲線來(lái)改變物體動(dòng)畫效果的，比如我們可以將運(yùn)動(dòng)效果改成由慢到快：

void Start()

{

??? Tweener twe = transform.DOMoveX(5, 2); //3秒時(shí)間在世界坐標(biāo)中,讓X軸移動(dòng)到5的位置

??? twe.SetEase(Ease.InCubic); //由慢到快

}

?

而動(dòng)畫曲線的種類非常多，可以自己去試試看：

五.使用動(dòng)畫改變顏色

既然讓物體移動(dòng)是通過使用transform來(lái)點(diǎn)出DOTWeen的方法，那改變顏色就是讓材質(zhì)組件來(lái)調(diào)用DOTWeen的方法即可：

void Start()

{

??? Material material = GetComponent<MeshRenderer>().material;

??? material.DOColor(Color.red, 3); //3秒變紅

}

?

?六.動(dòng)畫事件

Material material;

Tweener twe;

void Start()

{

??? material = GetComponent<MeshRenderer>().material;

??? twe = material.DOColor(Color.red, 3); //3秒變紅

??? twe.OnComplete(ChangeColour); //動(dòng)畫播放結(jié)束時(shí)調(diào)用

}

void ChangeColour() //變色

{

??? twe = material.DOColor(Color.blue, 2); //2秒變藍(lán)

}

?

動(dòng)畫事件相關(guān)方法:

OnStart： 動(dòng)畫第一次播放時(shí)調(diào)用

OnPlay： 動(dòng)畫每次從暫停狀態(tài)解除時(shí)調(diào)用(包括初次播放)

Pause： 動(dòng)畫暫停時(shí)調(diào)用一次

OnUpdate： 動(dòng)畫播放過程中每幀調(diào)用

OnStepComplete： 每次動(dòng)畫播放結(jié)束時(shí)調(diào)用(受循環(huán)次數(shù)影響)

OnComplete： 每次動(dòng)畫播放結(jié)束時(shí)調(diào)用(不受循環(huán)次數(shù)影響,且倒放時(shí)不適用)

七.文本動(dòng)畫

1.讓文本逐字顯示：

使用UGUI創(chuàng)建一個(gè)Text，掛上該腳本:

void Start()

{

??? Text text = GetComponent<Text>();

??? text.DOText("最心愛的情人,卻傷害我最深,為什么你背著我愛別人", 5); //5秒時(shí)間將這段文字逐字顯示

??? text.DOColor(Color.green, 5); //顏色逐漸變綠

}

?

我們可以結(jié)合剛才講到的動(dòng)畫事件，來(lái)組一個(gè)連續(xù)的文字顯示：

代碼如下：

void Start()

?{

???? Text text = GetComponent<Text>();

???? Tweener twe = text.DOText("下面是有獎(jiǎng)競(jìng)猜:", 2);

???? twe.OnComplete(() =>

???? {

???????? text.text = "";

???????? text.DOText("富奸老賊是怎么死的?", 2);

???? });

?}

?

2.讓文本逐漸顯示：

首先要讓文字調(diào)成完全透明狀態(tài)：

掛上腳本運(yùn)行程序：

void Start()

{

??? Text text = GetComponent<Text>();

??? text.DOFade(1, 2); //2秒時(shí)間讓A值變?yōu)?

}

?

八.屏幕抖動(dòng)動(dòng)畫：

很多游戲中經(jīng)常會(huì)用到的效果，比如在戰(zhàn)斗的時(shí)候，主角被攻擊會(huì)伴隨著一陣屏幕抖動(dòng),然后

以此來(lái)提高游戲打擊感，其實(shí)所謂的屏幕抖動(dòng)其實(shí)就是攝像機(jī)位置的抖動(dòng)，還是離不開Transform動(dòng)畫：

void Start()

?{

???? //transform.DOShakePosition(2); //在隨機(jī)方向震動(dòng)2秒,幅度默認(rèn)為1

???? transform.DOShakePosition(2, 3); //在隨機(jī)方向震動(dòng)3秒,振幅為3

?}

?

將這個(gè)腳本掛攝像機(jī)上，運(yùn)行程序：

或者：

void Start()

?{

???? //transform.DOShakePosition(2); //在隨機(jī)方向震動(dòng)2秒,幅度默認(rèn)為1

???? //transform.DOShakePosition(2, 3); //在隨機(jī)方向震動(dòng)2秒,振幅為3

???? transform.DOShakePosition(3, new Vector3(0, 2, 0));//只在世界坐標(biāo)Y軸上震動(dòng)3秒,振幅為2

?}

?

抖動(dòng)動(dòng)畫不僅有位置上的抖動(dòng)，還有選擇上的抖動(dòng)和縮放上的抖動(dòng)：

旋轉(zhuǎn)抖動(dòng)： transform.DOShakeRotation

縮放抖動(dòng)： transform.DOShakeScale

我們來(lái)看下縮放抖動(dòng)是什么效果：

創(chuàng)建一個(gè)腳本掛在一個(gè)Cube上：

void Start()

{

??? transform.DOShakeScale(2, new Vector3(3, 2, 0));

}

?

九.可視化編輯

除了使用腳本來(lái)播放DOTween動(dòng)畫外，該插件還擁有可視化編輯的功能。

動(dòng)畫編輯器

1.為需要做動(dòng)畫的物體添加DoTweenAnimation組件：

2.選擇要做動(dòng)畫的組件：

3.當(dāng)要做動(dòng)畫的組件不存在時(shí)則報(bào)錯(cuò)，非常方便：

4.各種參數(shù)：

5.當(dāng)在編輯器關(guān)閉了自動(dòng)播放后，使用代碼播放:

public DOTweenAnimation a; //在編輯器界面將掛有該組件的物體拖進(jìn)來(lái)

void Start()

{

??? a.DOPlayForward();

}

?

6.如果不使用代碼，使用點(diǎn)擊按鈕播放,在按鈕的事件窗口將物體拖進(jìn)去,找到DoTweenAnimation組件,調(diào)用播放方法:

路徑編輯器

使用該組件可以做一些尋路的效果：

1.場(chǎng)景中創(chuàng)建一個(gè)Cube，添加DoTweenPath組件：

2.運(yùn)行程序：

十.結(jié)語(yǔ)

以上簡(jiǎn)單介紹了DOTWeen的常用技巧，但可以肯定的是，DOTWeen是一個(gè)非常強(qiáng)大的工具，還有很多潛力在我這篇文章中沒有挖掘出來(lái)，大家下來(lái)可以自行進(jìn)行更深層次的研究。

是不是感覺少了點(diǎn)什么？

想系統(tǒng)學(xué)習(xí)游戲開發(fā)的童鞋，歡迎訪問?http://levelpp.com/? ? ? ??????

游戲開發(fā)攪基QQ群：869551769? ? ? ? ??????

微信公眾號(hào)：皮皮關(guān)