UI的製作在遊戲開發中也佔據很重要的一環，而說到UI，當然不可少的是其動態的呈現。在Unity中，製作UI的動作有幾種方式

• Animator
• Timeline
• Spine
• Tween

Animator是用來製作不論是2D或是3D動態角色的首選，用它來做UI也是許多專案中預設的選項。Timeline倒是比較少見，前年推出了Timeline後，多數的團隊多半是拿它來處理過場劇情和動畫的呈現，不過它既然能夠依照時間調出過場劇情，拿它來呈現UI也不是不可。不過Timeline比起Animator畢竟是較新的功能，普及呈度不高。

Spine可稱為骨架式2D調整工具中非常強大的，所以用它來進行UI的製作也是很好的選擇。不過在它是外部的工具，價位也有些高昂，除非遊戲本體就已經是用Spine進行骨架的調整，要不然特地為了UI而購入，不一定是經濟的選擇。而另一點則是它的功能強大相對來說就是比較複雜，學習上也很花時間。

而Tween，有時會稱為Ease等，在網頁上的動畫也時常用到，就是今天要討論的重點。

動畫簡白一些就是對動的方式進行呈現，也就是一個點、一個物件在二軸或是三軸上在一定的時間內如何從A點移動到B點。撇開動畫這種花俏的描述，從A點到B點最容易理解的動法，就是線性移動，也就是國中時就上過的移動方式。但線性移動雖然看起來有在動，但死板無趣，進而延伸了一段時間內二點之間多種不同的方式，將線性的呈現改成波形的呈現。

前面三種的動作多為手動調整，能產生不規律的波形，也就是用數學函式無法或很不容易呈現的波形。而Tween，則是用單個至多個數學函式組合而成的波形。比方說三角函數裡Sin或是Cos波形。各有其優缺點，看當下的需求決定，故不在此定奪。但多數時間調人物動作時不規則比較適合，而UI等則規則呈現也無妨。

可以參考以下的文章來解解Tween的波形目前常用的有哪些。

• Ease Visualizer by Animate WP
• easings.net
• Ease Visualizer by GreenSock
• Robert Penner's easing cheatsheet

既然是數學函式，必有相對應的程式函式庫可以使用。Unity中不少的Tween可供選擇，但這幾年來隨著HOTween的作者調整發佈了DOTween後，已成為Unity中相當具代表性的Twewn函式庫，多數的開發者會選擇以DOTween當做優先的選擇。而Doozy的核心就是建構在DOTween上而擴充的，故在了解Doozy前，先來了解DOTween為何。

實際用DOTween

要了解DOTween，就從如何使用此從函式庫出發。先至DOTween的官網下載最新的版本後，直接將整個資料夾放入到Unity中。記得要先完成它自身的設定。

接下來就是產生一個簡易UI後，直接套用現有的Tween。程式碼片段為

if (_viewOnscreen)
{
    view.DOAnchorPos(Vector2.zero, 2.0f, true);
}
else
{
    view.DOAnchorPos(_startingPos, 2.0f, true);
}

直接使用而不設定Tween的種類，預設就是用線性移動的方式進行。於其後加上Tween種類則可以嘗試不同Tween的呈現。

if (_viewOnscreen)
{
    view
        .DOAnchorPos(Vector2.zero, 2.0f, true)
        .SetEase(_currentEase);
}
else
{
    view.DOAnchorPos(_startingPos, 2.0f, true)
        .SetEase(_currentEase);
}

詳細執行差異可從範例中了解。範例專案放罝在Git Repo中的doozy-tween目錄裡。

用程式碼撰寫對程式設計師來說不是問題，但要用何種Tween，數值怎麼給，對程式人員來說是一件很傷腦筋的事。所以Tween的調整，最好還是交付給UI設計師，這是讓他們大展身手的時機。但一碰到寫程式碼，還是折騰了UI設計師。

如果用之前提及的Bolt，或許可以大幅度降低困難度，不過這裡要引薦的是Doozy，一個專門為了UI而生的外掛，可說讓UI製作的難度一下子就打了三折的概念。它怎麼處理Tween就是接下來要介紹的。

Doozy基本概念

Doozy最好的好處就是它是建構在現有的uGui上，如果用了之後覺得不適用，或是想要客製化某些部份，都不用擔心Doozy的元件會干擾，直接移除就可以，而本來uGui部份也不會受到干擾。

既然是用uGui，Canvas的設定仍是最主要的。一但Canvas產生後，再來就是View，而這個View並不限於一整個畫面的大小，它可以大到全畫面，或小到只是一個清單中的物件。雖然被稱為View，不過用會動的載具來形容會更加貼切。這個元件是實值對應到Tween的主要元件。

右邊的Show View、Hide View和View Loop就是調整Tween的位置。基於展的方便性，調整View Loop的Tween。在Animation那調整Rotate Loop，而Ease選項那含有DOTween各種定義好的數學函式。

看到這些Tween用這麼直覺的方式進行編撰，相信UI設計人員可以自行處理UI最佳的呈現。

除了讚嘆Doozy的簡易操作外，真不知道還有沒有比這更方便的工具？但這只是其中一部份，它另一部份的功能和直覺的Tween調整比起來，可謂有過之而無不及。今天就先在此打住。