前言

一開始在Unity製作UI動畫的時候通常會使用Unity的Animation來製作，但是其實這是一個不太好的做法，因為在unity的Animation製作UI動畫的話需要大量的Key frame且效果也沒有到非常好，更重要的是相當的吃遊戲資源，這時候我們還有什麼方式可以製作UI動畫呢? 那就是Tweening! Tweening的意思就是AB兩者之間移動的補間動畫概念命名，這個方式不僅能使用在UI的動畫上，現在看到更多的是運用的3D的動畫上面，而Teewning裡面現在最好用的莫過於LeanTwenn這套插件，所以這套件可以說非學不可。

有興趣的朋友可以先看J哥的LeanTween介紹

LeanTween 非常好用的unity3D Tween套件

簡單的UI Popup

在我們常使用的UI裡面常常會需要用到Popup視窗功能，今天就跟大家一起學習如何利用Lean Tween製作Popup視窗吧!

首先我們快速的建立一個有背景的Popup視窗UI，這方面我就不贅述了因為大家都是UI設計師，小弟拙劣的使用一些素材搭造而成。

接著我們在我們的Popup Panel上面新建一個語法叫做Scale Tween以下就提供語法給大家參考，這邊最棒的地方就是動畫播完後就會自動Destroy，跟以往播動畫都會更新每一楨的方式完全不同。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ScaleTween : MonoBehaviour
{
 // 按下按鈕將視窗關掉
  public void OnClose()
    {
        LeanTween.scale(gameObject, new Vector3(0, 0,0), 0.5f).setOnComplete(DestroyMe);
    }

  void DestroyMe()
    {
        Destroy(gameObject);
    }

    }

設定好以後我們還有一個很重要的工作要做，因為我們有設定了Button所以我們在按鈕上面一定要有設定。

我們要在On Click裡面將Source選擇我們建立好的PopupPan，接著在ScaleTween裡面找到On Close()的選項。

• 

設定好以後我們按下Game模式，按下我們建立好的按鈕就可以看到視窗不需要用到Unity Animator就可以進行動畫消失了。

Popup 視窗逐漸彈出

再來跟大家學習一個好玩的動畫，我們可以讓視窗在畫面上一個一個彈出，這個功能可以在需要多個Popup視窗上的介面使用到。

首先我們將原本設定好的Popup Panel複製多個

接著我們修改一下原本的Scale Tween語法

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;

public class ScaleTween : MonoBehaviour
{
    public UnityEvent onCompleteCallback;
// 設定彈出時間以及Delay時間
    public void OnEnable()
    {
        transform.localScale = new Vector3(0, 0, 0);
        LeanTween.scale(gameObject, new Vector3(1, 1, 1), 0.3f).setDelay(0.5f).setOnComplete(OnComplete);

    }

    public void OnComplete()
    {
        if(onCompleteCallback != null)
        {
            onCompleteCallback.Invoke();
        }
    }

  public void OnClose()
    {
        LeanTween.scale(gameObject, new Vector3(0, 0,0), 0.5f).setOnComplete(DestroyMe);
    }

  void DestroyMe()
    {
        Destroy(gameObject);
    }

    }

接著我們就來設定新增的Popup視窗，因為我們是要讓視窗一個一個跳出來的，所以先將還沒有要跳出來的視窗影藏起來。

接著我們將即將要跳出來的下一個視窗拖入Callback()的Object裡面並選擇GameObject的SetActive(bool)，這時候也要記得打勾旁邊的小方框。

依照順序的四個Popup視窗都是要製作以下的流程。

設定好以後就可以看到成果了，看起來是不是很方便呢?

Tweening Nice Type

在LeanTween裡面有許多的 Type可以讓我們的動畫更加生動，如果要使用裡面強大的功能就要在C#裡面新增一些setEase語法。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;

public class ScaleTween : MonoBehaviour
{
    public LeanTweenType inType;
    public LeanTweenType outType;
    public UnityEvent onCompleteCallback;

    public void OnEnable()
    {
        transform.localScale = new Vector3(0, 0, 0);
        LeanTween.scale(gameObject, new Vector3(1, 1, 1), 0.25f).setDelay(0.1f).setOnComplete(OnComplete).setEase(inType);

    }

    public void OnComplete()
    {
        if(onCompleteCallback != null)
        {
            onCompleteCallback.Invoke();
        }
    }

  public void OnClose()
    {
        LeanTween.scale(gameObject, new Vector3(0, 0,0), 0.25f).setEase(outType).setOnComplete(DestroyMe);
    }

  void DestroyMe()
    {
        Destroy(gameObject);
    }

    }

新增完以後就可以看到我們在 in Type跟 Out Type裡面多了很多效果可以做使用

依照個人喜好設定好以後就可以看一下效果了，看起來蠻像一回事的!

小結:

由於才剛接觸LeanTween這套插件，並還沒有將這套插件的功能運用到最強大，但是透過簡單的練習可以讓我們更快的上手，而這套插件更可以運用在3D的動畫上面，期待未來可以學習到更多的方法可以跟大家一起分享。