動畫插件Tween的使用
一：iTween插件使用
二：DoTween插件使用
一：iTween插件使用
1.1 iTween插件介紹
iTween是一個動畫庫,作者創建它的目的就是最小的投入實現最大的產出.讓你做開發更輕鬆,用它可以輕鬆實現各種動畫,晃動,旋轉,移動,褪色,上色,控制音頻等等。
iTween的核心是數值插值，簡單說就是給iTween兩個數值(開始值，結束值)，它會自動生成一些中間值。
主要文件有兩個iTween.cs 和 iTweenPath.unitypackage(編輯路徑才需要這個包)
如何將iTween 加入項目:
在項目中建立Plugins目錄， 然後將下載的iTween.cs放到Plugins目錄即可。
如果需要編輯路徑, 使用import package->custom package菜單功能加入iTweenPath.unitypackage即可。
1.2iTween插件使用
(1)移動：使用iTween.Move
void Start () {
//iTween.MoveTo (gameObject,iTween.Hash("x",5,"y",3,"time",5));
iTween.MoveTo (this.gameObject,Vector3.up*5,3);
iTween.MoveTo (this.gameObject,iTween.Hash(
"time",5,
"x",10,
"looptype",iTween.LoopType.pingPong,
"oncomplete","onAnimationComplete",
"oncompleteparams","ssss"
));
}
void onAnimationComplete(string s){
print (s);
print ("complete");
}
註解：當我們使用iTween的時候，主要的方式就是使用iTweeen的靜態函數，第一個參數一般都是GameObject，第二個參數是具體的Hashtable,根據具體的需要進行設置即可。
Hashtable hash = new Hashtable ();
hash.Add ("x",20);
hash.Add ("time",5);
hash.Add ("looptype",iTween.LoopType.pingPong);
iTween.MoveTo (this.gameObject,hash);
(2)縮放：使用iTween.ScaleTo
iTween.ScaleTo (this.gameObject,iTween.Hash(
"time",3,
"x",5
));
(3)抖動：使用iTween.PunchPosition
iTween.PunchPosition (this.gameObject,iTween.Hash(
"time",2,
"x",2,
"y",2
));
Hash
//鍵值對兒的形式保存iTween所用到的參數
Hashtable args = new Hashtable();
//這裡是設置類型，iTween的類型又很多種，在源碼中的枚舉EaseType中
//例如移動的特效，先震動在移動、先後退在移動、先加速在變速、等等
args.Add("easeType", iTween.EaseType.easeInOutExpo);
//移動的速度，
args.Add("speed",10f);
//移動的整體時間。如果與speed共存那麼優先speed
args.Add("time",1f);
//這個是處理顏色的。可以看源碼的那個枚舉。
args.Add("NamedValueColor","_SpecColor");
//延遲執行時間
args.Add("delay", 0.1f);
//移動的過程中面朝一個點
args.Add("looktarget",Vector3.zero);
//三個循環類型 none loop pingPong (一般 循環 來回)
//args.Add("loopType", "none");
//args.Add("loopType", "loop");
args.Add("loopType", "pingPong");
//處理移動過程中的事件。
//開始發生移動時調用AnimationStart方法，5.0表示它的參數
args.Add("onstart", "AnimationStart");
args.Add("onstartparams", 5.0f);
//設置接受方法的對象，默認是自身接受，這裡也可以改成別的對象接受，
//那麼就得在接收對象的腳本中實現AnimationStart方法。
args.Add("onstarttarget", gameObject); //移動結束時調用，參數和上面類似
args.Add("oncomplete", "AnimationEnd");
args.Add("oncompleteparams", "end");
args.Add("oncompletetarget", gameObject);
//移動中調用，參數和上面類似
args.Add("onupdate", "AnimationUpdate");
args.Add("onupdatetarget", gameObject);
args.Add("onupdateparams", true);
// x y z 標示移動的位置。
args.Add("x",5);
args.Add("y",5);
args.Add("z",1);
//當然也可以寫Vector3
//args.Add("position",Vectoe3.zero);
//最終讓改對象開始移動
iTween.MoveTo(gameObject,args);
(4)鏡頭抖動：使用iTween.ShakePosition
iTween.ShakePosition (this.gameObject,iTween.Hash(
"time",2,
"x",2,
"y",2
));
(5)顏色變化：使用iTween.ColorTo等
iTween.ColorTo (this.gameObject,Color.yellow,5);
iTween.ColorFrom (this.gameObject, Color.black, 3);
iTween.ColorTo (this.gameObject,iTween.Hash("color",Color.yellow,
"looptype",iTween.LoopType.pingPong));
iTween.ColorTo (this.gameObject, iTween.Hash (
"r", 0, "g", 255, "b", 0,
"includechildren", true));
(6)物體沿著指定路徑運動
public class Path : MonoBehaviour {
//路徑尋路中的所有點
public Transform [] paths;
void Start ()
{
Hashtable args = new Hashtable();
//設置路徑的點
args.Add("path",paths);
//設置類型為線性，線性效果會好一些。
args.Add("easeType", iTween.EaseType.linear);
//設置尋路的速度
args.Add("speed",10f);
//是否先從原始位置走到路徑中第一個點的位置
args.Add("movetopath",true);
//是否讓模型始終面朝當面目標的方向，拐彎的地方會自動旋轉模型
//如果你發現你的模型在尋路的時候始終都是一個方向那麼一定要打開這個
args.Add("orienttopath",true);
//讓模型開始尋路
iTween.MoveTo(gameObject,args);
}
void OnDrawGizmos()
{
//在scene視圖中繪製出路徑與線
iTween.DrawLine(paths,Color.yellow);
iTween.DrawPath(paths,Color.red);
}
}
(7）使用iTween提供的路徑編輯功能
導入iTweenPath插件，給立方體添加iTweenPath腳本，修改路徑名稱，添加中間的過度點即可。
public class RotateDemo : MonoBehaviour {
public GameObject go;
// Use this for initialization
void Start () {
iTween.MoveTo (this.gameObject,iTween.Hash(
"time",5,
"looktarget",go.transform,
"path",iTweenPath.GetPath("New Path 2"),
"oncomplete","Method",
"easetype",iTween.EaseType.easeInExpo
));
}
}
//anchorPosition是物體本身的Pivot點相對於Anchor的距離
Vector3 v1= this.GetComponent<RectTransform> ().anchoredPosition;
//Local是物體本身的pivot相對於父節點的Pivot
Vector3 v2= this.GetComponent<RectTransform> ().localPosition;
//物體Pivot點相對於屏幕左下角的位置
Vector3 v3= this.GetComponent<RectTransform> ().position;
//將local轉換為世界坐標系
Vector3 v4 = this.GetComponent<RectTransform> ().TransformPoint (v2);
(8）攝像機淡入淡出效果
public class CameraFadeDemo : MonoBehaviour {
public Texture2D texture;
// Use this for initialization
void Start () {
iTween.CameraFadeAdd (texture);
iTween.CameraFadeFrom (1,3);
//iTween.CameraFadeTo (1,3);
}
}
iTween插件其他的動作還有很多，具體使用的時候直接進入iTween.cs中進行查看即可。
二：DoTween插件使用
2.1 DoTween介紹
因為NGUI中已經有UITween了，可是UGUI中是沒有這樣的Tween的。我看過UGUI的Demo它的實現方式是用Animator來做的，這樣每一個需要移動的對象就要掛上一個AmimationController並且還要去編輯動畫，所以極其的不方便。使用iTween可以實現，當然也可以使用DoTween。這裡我們重點講解DoTween的使用方式。
官方文檔鏈接：http://dotween.demigiant.com/documentation.PHP#globalSettings
普通版下載地址：http://dotween.demigiant.com/download.php
pro版下載地址：http://pan.baidu.com/s/1dEzTQkL
DOTween真的比iTween好很多（因人而異）：
1.編寫方面更加人性化；
2.效率高很多，其中有一點是因為iTween使用的是unity內置的SendMessage。
2.2 DoTween具體使用
一些名詞：
Tweener：補間動畫
Sequence：相當於一個Tweener的鏈表，可以通過執行一個Sequence來執行一串Tweener
Tween：Tweener + Sequence
Nested tween：Sequence中的一個Tweener稱為一個Nested tween
主要的方法(就是最常用的)：
1.以DO開頭的方法：就是補間動畫的方法。例如：transform.DOMoveX(100,1)
2.以Set開頭的方法：設置補間動畫的一些屬性。例如：myTween.SetLoops(4, LoopType.Yoyo)
3.以On開頭的方法：補間動畫的回調方法。例如：myTween.OnStart(myStartFunction)
（1）DOTween初始化與全局設置：
當你第一次創建一個Tween時，DOTween就會自動初始化(只初始化一次)，使用預設值。
當然，也可以使用DOTween.Init方法進行自定義，但要在第一次創建一個Tween前。所有創建的Tween都會受DOTween.Init方法的影響。
但之後，你也可以通過DOTween類的一些靜態方法或者變數來修改全局設置：
static DOTween.Init(bool recycleAllByDefault = false, bool useSafeMode = true, LogBehaviour logBehaviour = LogBehaviour.ErrorsOnly)
recycleAllByDefault ：如果為true，則當Tween完成時就會被回收，放到一個池中；否則就會被destroy
useSafeMode ：效率會稍微降低，但更安全
logBehaviour ：默認值為只列印錯誤信息
（2）DOTween移動
//5秒移動到(10,10,10).第三個參數為true時,數值漸變過程皆為整數
transform.DOMove(new Vector3(10, 10, 10), 5,true);//給物體添加動畫
transform.DOMove(new Vector3(10, 10, 10), 5,true).From();//給物體添加動畫
（3）DOTween縮放
Tweener tweer= transform.DOScale (new Vector3(2,2,2),4);
（4）DOTween旋轉
transform.DORotate(new Vector3(0, 0,200), 5);//旋轉動畫
（5）DOTween序列動作
Sequence mySequence = DOTween.Sequence();
mySequence.AppendInterval (5);
mySequence.Append(transform.DORotate(new Vector3(0, 180, 0), 1));
mySequence.AppendInterval (5);
mySequence.PrependInterval(5);
print (mySequence.Duration());
mySequence.AppendCallback (TweenCall);
// Insert a scale tween for the whole duration of the Sequence
mySequence.Insert(1, transform.DOScale(new Vector3(3, 3, 3),3));
mySequence.Append(transform.DOScale(new Vector3(3, 3, 3),3));
print (mySequence.Duration());
mySequence.onComplete = delegate() {
Debug.Log("移動完畢事件");
} ;
Sequence是Tween的子類，就是序列動作，裡面的動作按照先後順序執行，其中幾個函數的含義如下：
- Append:追加動作
- AppendInterval:追加時間，什麼也不做
- Insert:在指定的下標追加動作
- AppendCallback:追加回調函數
- PrependInterval:在序列動作的開頭追加時間
（6）常見Set函數
SetAs(Tween tween TweenParams tweenParams)
SetAutoKill(bool autoKillOnCompletion = true)
SetEase(Ease easeType AnimationCurve animCurve EaseFunction customEase)
SetId(object id)
SetLoops(int loops, LoopType loopType = LoopType.Restart)
SetRecyclable(bool recyclable)
SetUpdate(UpdateType updateType, bool isIndependentUpdate = false)
注意的一點是SetUpdate方法可以讓目標忽略timeScale
//讓TimeScale = 0
Time.timeScale = 0;
Image image = transform.Find("Image").GetComponent<Image>();
//調用DOmove方法來讓圖片移動
Tweener tweener = image.rectTransform.DOMove(Vector3.zero,1f);
//設置這個Tween不受Time.scale影響
tweener.SetUpdate(true);
//設置移動類型
tweener.SetEase(Ease.Linear);
tweener.SetId (1);
tweener.onComplete = delegate() {
Debug.Log("移動完畢事件");
} ;
image.material.DOFade(0,1f).onComplete = delegate() {
Debug.Log("褪色完畢事件");
} ;
OnComplete(TweenCallback callback)
OnKill(TweenCallback callback)
OnPlay(TweenCallback callback)
OnPause(TweenCallback callback)
OnRewind(TweenCallback callback)
OnStart(TweenCallback callback)
OnStepComplete(TweenCallback callback)
OnUpdate(TweenCallback callback)
OnWaypointChange(TweenCallback<int> callback)
（8）參數復用
// Store settings for an infinite looping tween with elastic ease
TweenParms tParms = new TweenParms().SetLoops(-1).SetEase(Ease.OutElastic);
// Apply them to a couple of tweens
transformA.DOMoveX(15, 1).SetAs(tParms);
transformB.DOMoveY(10, 1).SetAs(tParms);
（9）操作Tweener
DoTween靜態方法
//停止所有的並且返回停止的數量
DOTween.Pause();
//Pauses all tweens that have "badoom" as an id
DOTween.Pause("badoom");
Twiner實例方法
myTween.Pause();
部件+DO
transform.DOPause();
以上的是Pause方法，其餘的操作方法與之類似。上面三種方式中，DOTween和Tweener都有操作方法，而部件的話，要在前面+"DO"。
（10）Tween的Life(生命周期)
當你創建tween時它會自動播放(除非你設置了全局的 defaultAutoPlay 行為）直到完成循環。
當tween完成後它會自動終止(除非你設置了做全局的 defaultAutoKill 行為）,這意味著你不能再使用它。
如果你們要重複使用同一個tween,僅僅需要設置它的 autoKill 為 False(可以通過 global autoKill 設置所有的tweens 或為你自己的tween 設置 SetAutoKill(false) )。
（11）Cache和tween最大值
如果你有緩存池緩存所有的你創建的tween，它們就可以重複使用，不需要創建新的
此外也可以避免使用更多的資源，它會限制最大200個Tweeners並且50FPS在同一時間，如果你需要更多，DOTween會自動增加它的大小，當然你可以直接設置來避免自動調整可能會發生卡頓的情況
//Set max Tweeners to 3000 and max Sequences to 200(設置最大Tweeners為300,最大Sequence為200)
DOTween.SetTweensCapacity(3000, 200);
在任何時候你想在tween完成時清除DOTween的cache,你可以調用 DOTween.Clear()，它會kill所有的tweens並釋放所有的緩存.
（11）點擊button按鈕，屏幕外的圖片移動到屏幕中指定位置，再次點擊按鈕，圖片再次移動到屏幕外.
public class ButtonTween : MonoBehaviour {
public Image image;
public GameObject Cube;
private bool isIn = false;
// Use this for initialization
void Start () {
//調用DoMove方法來讓圖片移動.
Tweener tweener = image.rectTransform.DOMoveX(Cube.GetComponent<Transform>().position.x, 0.3f);
//不受Time.timeScale的影響.
tweener.SetUpdate(true);
//設置移動類型.
tweener.SetEase(Ease.Linear);
//設置自動銷毀動畫為flase
tweener.SetAutoKill(false);
//暫停動畫
tweener.Pause();
}
public void TransformImage()
{
if (isIn == false){
//正常播放動畫.
image.rectTransform.DOPlayForward();
isIn = true;
}else{
//倒放動畫.
image.rectTransform.DOPlayBackwards();
isIn = false;
}
}
}
推薦閱讀：
