前言:
今天來學習一下大名鼎鼎的Unity插件——DoTween。
DoTween
DOTween是一款針對Unity的快速高效、類型安全的面向對象的補間動畫引擎,並且對於C#用戶做出了很多的優化。
和學習任何東西一樣,我們先將它的官網加入收藏,有問題可以隨時看文檔。
導入資源,預覽效果
我這裏分享了一個DoTween以及一個示例的Unity場景
鏈接:https://pan.baidu.com/s/1bOI-kqvLEESrGZzukjuiyQ
提取碼:0ds2
我們發現,使用的DOTween插件後,transform居然能夠點出DOMove方法,這是因爲C#的拓展性,使其和Unity的一些類能產生鏈接,是不是感覺很神奇。因爲這些特性,使我們在使用起來非常簡單易懂,想讓哪個物體動,就讓它的transform組件來調用DOTWeen的方法就可以了。
關於如何實現C#的擴展,可以參考https://blog.csdn.net/LIQIANGEASTSUN/article/details/50518053
位置、旋轉、縮放
- DOMove:移動位置
- to:目標位置
- duration:持續時間
- snapping:若true,則將過程中所有值對齊成整數。
- DORotate:旋轉
- RotateMode
- RotateMode.Fast(默認):旋轉最短的路徑,不會超過360度。
- RotateMode.FirstBeyond360:旋轉將會超過360度。
- RotateMode.WorldAxisAdd:使用world軸和高級精度模式
- RotateMode.LocalAxisAdd:將給定的旋轉添加到轉換的本地軸上。
- duration:持續時間
- endValue:結束位置(歐拉角)
- RotateMode
- DOScale:改變縮放
- to:目標縮放
- duration:持續時間
- DOJump:跳躍
- endValue:末位置
- jumpPower:跳躍力度
- numJumps:跳躍次數
- duration:持續時間
- snapping:若true,則將過程中所有值對齊成整數。
- DOPunchPosition:衝擊(對應的還有Rotation的、Scale的)
- punch:衝擊到的位置
- duration:持續時間
- vibrato:頻率
- elasticity:彈性
- DOLookAt:旋轉目標使朝向某處
- towards:朝向
- duration:持續時間
- axisConstraint:對旋轉值添加某個軸向上的約束(默認AxisConstraint.None)
- up:定義向上的軸向
- DoBlendableMoveBy:設置的值不是最終位置而是相對運動量(效果與setRelative相同),這種方式允許其他的DOBlendableMove在同一個目標上協同工作。
顏色、透明度
顏色:
DOTween改變顏色的主要思路是通過物體材質球的_Color屬性來改變顏色,我們可以找到物體的材質球,右擊Edit來查看有沒有_Color屬性,如果沒有則需要你收到指定材質的屬性。
示例:
標準使用:
GetComponent<MeshRenderer>().material.DOColor(Color.red, 2f);
如果對應材質球沒有_Color屬性,則我們要手動指定property
GetComponent<MeshRenderer>().material.DOColor(Color.red,"_TintColor", 2f);
以上是物體材質的顏色修改方法
對於UI的話:
Text text = GetComponent<Text>();
text.DOColor(Color.red, 2f);
對於UI中的圖片也是一樣的道理,很簡單。
透明度:
透明度也是通過材質球來修改,很多物體的材質球不支持透明度,建議更換材質球,然後代碼裏手動指定好屬性:
GetComponent<MeshRenderer>().material.DOFade(0,"_TintColor", 2f);
動態漸變:
gradient:傾斜度
我們還可以指定一個漸變關係,讓物體去漸變:
創建一個Gradient對象:
public Gradient gradient;
然後在Unity面板裏,就可以給它指定顏色。
然後
void Start()
{
GetComponent<MeshRenderer>().material
.DOGradientColor(gradient,2f);
}
就可以讓物體按照漸變板信息去漸變。
震動效果
震動效果分爲Position、Rotation、Scale三個方向,這裏以Rotation爲例:
transform.DOShakeRotation(2f, 1, 10, 90);
參數是:持續時間、振幅(震動力度)、頻率、隨機範圍(0~180,最好不要超過90)、snapping(是否對齊到整數)、fadeout(漸出動畫)
路徑動畫
路徑動畫,使遊戲物體沿給定路徑移動。
- pathType:
- Liner–路徑是筆直的;
- CatmullRom–曲線路程
- pathMode:路徑模式,該參數主要針對LookAt選項設置。
- Ignore(忽略所有的LookAt設置)
- Full3D–3D效果中LookAt方向不受限制
- Sidescroller2D–lookAt方向只能左右轉
- TopDown2D–LookAt方向只能上下轉
- resolution:路徑的分辨率(在線性路徑中無效);更高的分辨率可以得到更詳細的曲線路徑,但代價更高。默認值是10,但是如果在路徑點之間沒有明顯的長曲線,那麼5的值通常就足夠了
- gizmoColor.gizmo畫線路徑的顏色
示例:
void Start()
{
//路徑移動
Vector3[] path = new Vector3[] {
new Vector3(0,0,0),
new Vector3(3,32,1),
new Vector3(7,59,37),
new Vector3(0,0,77)};
transform.DOPath(path,5,PathType.CatmullRom,PathMode.Full3D);
}
當然,我們可以直接添加一個組件來做路徑——DOTweenPath。
給物體添加組件後,按下Ctrl+Shift來添加路徑點,ALT+Shift來刪除路徑點就可以編輯路徑。
這種方法就不需要腳本了,直接一個組件解決:
組件面板中可以調整循環方式、路徑點信息、朝向等各種信息
動畫序列(Sequence)
sequence:一系列、一連串、一組鏡頭
我們可以將動畫存放在一個動畫隊列中,讓它以隊列的形式播放
void Start()
{
//創造隊列動畫
Sequence sequence = DOTween.Sequence();
//加入動畫
sequence.Append(transform.DOMoveX(1, 3));
//加入同時動畫
sequence.Insert(0,transform.DOScaleX(3,3));
//加入間歇
sequence.AppendInterval(2);
//加入動畫
sequence.Append(transform.DOMoveX(5.408844f, 3));
//加入同時動畫
sequence.Insert(5, transform.DOScaleX(1, 3));
}
加入同時動畫可以不用Insert,而使用Join,這個會直接在當前動畫同時播放某動畫
而且它不像Insert一樣需要計算時間
sequence.Join(transform.DOScaleX(3,3));
Join只和最上面的Append的動畫是同時播放。
另外,我們還可以給動畫隊列添加回調方法,這個回調方法就會加入Sequence隊列中
//加入動畫
sequence.Append(transform.DOMoveX(1, 3));
//加入同時動畫
sequence.Join(transform.DOScaleX(3,3));
sequence.AppendCallback(() =>
{
print("回調");
});
也有一個不受隊列影響的InsertCallback,不管sequence隊列進行到了哪一步,他都會在第n秒調用回調方法(n是第一個參數)
sequence.InsertCallback(0,() =>
{
print("第0秒調用");
});
總結一下:
- Append:想sequence隊列添加動畫,按照隊列順序播放
- Join:在上一個加入sequence動畫隊列的動畫播放中播放動畫
- Insert:不受sequence隊列動畫影響,在指定時刻播放動畫。
動畫的控制、回調
給一段代碼,你很快就能明白了:
void Start()
{
Tweener tweener=transform.DOMoveX(10, 2)
.SetEase(Ease.Linear)
.SetLoops(2, LoopType.Restart)
.SetDelay(0)
.SetAutoKill(false);
tweener.OnComplete(() =>
{
print("OnComplete");
});
tweener.OnKill(() =>
{
print("OnKill");
});
tweener.OnPlay(() =>
{
print("OnPlay ");
});
tweener.OnStart(() =>
{
print("OnStart");
});
tweener.OnPause(() =>
{
print("OnPause");
});
tweener.OnRewind(() =>
{
print("OnRewind");
});
tweener.OnUpdate(() =>
{
print("OnUpdate");
});
}
動畫事件相關方法:
OnStart: 動畫第一次播放時調用
OnPlay: 動畫每次從暫停狀態解除時調用(包括初次播放)
Pause: 動畫暫停時調用一次
OnUpdate: 動畫播放過程中每幀調用
OnStepComplete: 每次動畫播放結束時調用(受循環次數影響)
OnComplete: 每次動畫播放結束時調用(不受循環次數影響,且倒放時不適用)
實用示例
逐字顯示:
void Start()
{
Text text = GetComponent<Text>();
text.DOText("有意思的事情", 5); //5秒時間將這段文字逐字顯示
text.DOColor(Color.red, 5); //顏色逐漸變紅
}
文字顯示的翻頁效果
void Start()
{
Text text = GetComponent<Text>();
Tweener twe = text.DOText("下面是有獎競猜:", 2);
twe.OnComplete(() =>
{
text.text = "";
text.DOText("富奸老賊是怎麼死的?", 2);
});
}
商業轉載 請聯繫作者獲得授權,非商業轉載 請標明出處,謝謝