簡介

當我們想要在Unity中在一定時間內進行物件的”平滑動態移動”，有一個套件叫做”ITween”，這常是大家耳熟能詳的外掛套件，也是很好使用的工具。只需要參考官方文件提供的程式碼直接使用即可。

MoveTo(GameObject target, Vector3 position, float time)

如上段程式碼所示，需要輸入三種資料型態，GameObject(場景物件)、Vector3(目標位移三維空間位置)、Float(移動時間)，我們可以看到在ITween預設的位移場景物件是GameObject，那我們這篇是要講述假如我們想要Tween的物件不是GameObject而是UGUI，要怎麼辦?以下我們則會講述實作方法。

事前設定

請先開啟Unity Asset Store下在Free版本的ITween套件，快速連結。
大家可以到Plugin→Pixelplacement→ITween→Sample來開啟範例場景， 先執行看看ITween的程式有沒有在你環境中正常執行。

大家可以看到上圖場景中該物件點下去後，在Inspector視窗中有一個Script Component叫做MoveSample.cs，按右鍵點選Edit Script。

iTween.MoveBy(gameObject, iTween.Hash("x", 2, "easeType", "easeInOutExpo", "loopType", "pingPong", "delay", .1));
//官方MoveBy 範例如下
//MoveBy(GameObject target, Vector3 amount, float time)
//MoveBy(GameObject target, Hashtable args)

可以看到程式碼，Sample中是使用第二種範例，在gameobject後面的iTween.Hash是Hashtale資料型態，在裡面帶有(移動目標位置、移動曲線、移動方式、是否要重複執行、位移模組、是否要延遲、延遲時間)(這可以在官方參考文件找)，這一方面是要看你環境可不可以執行，另一方面是讓大家熟悉itween的運作與itween物件，是object。

建置UGUI Image 與 修改ITween.cs

我們在場景中新增UGUI物件→Image，新增後可以點選Image物件可以看到它有個Component叫做Image(Script)，我們可以視做Image視個GameObject。那我們接著請打開ITween的原始碼。

Step1 : 新增UGUI name Space
當開啟程式碼時，可以看到如下圖有個地方叫做NameSpace，為了要讓程式碼認得UGUI的Components，就必須新增一段程式碼: using UnityEngine.UI;
個人建議做了每一動都計的存檔，ctrl + S。

Step2 : 我們的目的是要變化Image→Color，所以這邊我們會用到ITween的其中一個方法，叫做ColorFrom。下方是官方提供的程式碼。而在我們環境中的程式碼請使用Ctrl + F5來找到 ColorFrom 。
請搜尋 “public static void ColorFrom(GameObject target, Hashtable args)” 類別。

ColorFrom(GameObject target, Hashtable args)
ColorFrom(GameObject target, Color color, float time)

Step3 : 請在此類別大括弧中加入以下程式碼，(在文章後面附上整個ColorFrom的完整程式碼)，用意是除了GameObject物件之外，我們還想要加入UGUI，而且在UGUI中我們想要控制Image的color，所以要使用target(UGUI物件).GetComponent(取得物件子元素)<Image>(子元素名稱)().color(元素中的public參數，我們就是要改變此參數，進而改變物件的顏色)。

if(target.GetComponent<Image>())
{
  tempColor = fromColor = target.GetComponent<Image>().color;
}

Step4 : 為了驗證時作了以上動作後可以真的Tween UGUI的Color必須在新增一個程式碼，用來啟動此效果，程式碼如下。你先新增一個C# Script並將她拖到UGUI物件中，當成此物件的子元件。以下程式碼是用透過鍵盤按下A則可觸發itween的ColorFrom – 紅色 至 ColorTo -黃色。

void Update()
    {
        if(Input.GetKeyDown(KeyCode.A))
        {
            iTween.ColorFrom(this.gameObject, Color.red, 1f);
            iTween.ColorTo(this.gameObject, Color.yellow, 1f);
        }
    }

Step5 : 可以看到實際執行結果，確實ITween除了gameobject之外，UGUI也是可以來使用的。

小結

當我們把ITween的類別檔案改成可以使用UGUI後，大家可以嘗試Tween UGUI中的不同元素，本篇是在實現Image Color也可以使用到ITween來做顏色的轉換，在下一篇會提到並實驗UGUI中實用的元件與參數的轉換。

    public static void ColorFrom(GameObject target, Hashtable args)
    {
        Color fromColor = new Color();
        Color tempColor = new Color();

        //clean args:
        args = iTween.CleanArgs(args);

        //handle children:
        if (!args.Contains("includechildren") || (bool)args["includechildren"])
        {
            foreach (Transform child in target.transform)
            {
                Hashtable argsCopy = (Hashtable)args.Clone();
                argsCopy["ischild"] = true;
                ColorFrom(child.gameObject, argsCopy);
            }
        }

        //set a default easeType of linear if none is supplied since eased color interpolation is nearly unrecognizable:
        if (!args.Contains("easetype"))
        {
            args.Add("easetype", EaseType.linear);
        }

        //set tempColor and base fromColor:
        if (target.GetComponent<GUITexture>())
        {
            tempColor = fromColor = target.GetComponent<GUITexture>().color;
        }
        else if (target.GetComponent<GUIText>())
        {
            tempColor = fromColor = target.GetComponent<GUIText>().material.color;
        }
        else if (target.GetComponent<Renderer>())
        {
            tempColor = fromColor = target.GetComponent<Renderer>().material.color;
        }
        else if (target.GetComponent<Light>())
        {
            tempColor = fromColor = target.GetComponent<Light>().color;
        }
        else if (target.GetComponent<Graphic>())
        {
            tempColor = fromColor = target.GetComponent<Graphic>().color;
        }else if(target.GetComponent<Image>())
        {
            tempColor = fromColor = target.GetComponent<Image>().color;
        }

        //set augmented fromColor:
        if (args.Contains("color"))
        {
            fromColor = (Color)args["color"];
        }
        else
        {
            if (args.Contains("r"))
            {
                fromColor.r = (float)args["r"];
            }
            if (args.Contains("g"))
            {
                fromColor.g = (float)args["g"];
            }
            if (args.Contains("b"))
            {
                fromColor.b = (float)args["b"];
            }
            if (args.Contains("a"))
            {
                fromColor.a = (float)args["a"];
            }
        }

        //alpha or amount?
        if (args.Contains("amount"))
        {
            fromColor.a = (float)args["amount"];
            args.Remove("amount");
        }
        else if (args.Contains("alpha"))
        {
            fromColor.a = (float)args["alpha"];
            args.Remove("alpha");
        }

        //apply fromColor:
        if (target.GetComponent<GUITexture>())
        {
            target.GetComponent<GUITexture>().color = fromColor;
        }
        else if (target.GetComponent<GUIText>())
        {
            target.GetComponent<GUIText>().material.color = fromColor;
        }
        else if (target.GetComponent<Renderer>())
        {
            target.GetComponent<Renderer>().material.color = fromColor;
        }
        else if (target.GetComponent<Light>())
        {
            target.GetComponent<Light>().color = fromColor;
        }
        else if (target.GetComponent<Graphic>())
        {
            target.GetComponent<Graphic>().color = fromColor;
        }

        //set new color arg:
        args["color"] = tempColor;

        //establish iTween:
        args["type"] = "color";
        args["method"] = "to";
        Launch(target, args);
    }