NGUI系列教程七（序列幀動畫）

今天我給大家講一下如何使用NGUI做序列幀動畫。本節主要包括兩方面內容，分別是使用UIspirit和使用UITexture 做序列幀動畫。廢話不說了，下面開始。
還要在啰嗦一句，首先大家要准備一些序列幀的素材圖片，最好是大圖和小圖各一套。我們先來將使用UISpirit做序列幀動畫，這個方法只適合使用小圖。
在使用UISpirit 之前大家還要把准備好的序列幀圖片做成Atlas，如何做Atlas，大家可以參考系列教程四，這里就不多說了。建好自己的Atlas之后就可以開始着手做了。廢話終於完了。

1. 老規矩，新建一個場景，新建一個2D UI ，在Panel節點下新建一個UISpirit，圖片選擇序列幀的第一幀圖片。

2.如何讓Spirit動態換圖片，是我們要解決的重要問題。只要UIspirit能夠根據時間動態的換圖片就可以做到播放序列幀動畫。其實很簡單，最重要的就是UISpirit的Name屬性。我們只要能夠動態改變UISpirit的SpiritName，就可以實現動態換圖的功能。
代碼如下

 

public bool ActivateWait = false;
 
    float fireRate = 0.2f;
    int i = 0;
    float nextFire;
    string[] ActivatorTexture = new string[] { "activity00", "activity01", "activity02", "activity03", "activity04", "activity05", "activity06", "activity07", "activity08", "activity09", "activity10", "activity11" };            //這里存放我們需要調用的序列幀的名稱，這種方法比較笨拙，
//只適合使用圖片較少的情況，當圖片很多的情況下，我們可以使用代碼控制名稱，思路是前面的名稱一樣，后面的名稱代表序列幀編號，我們只要
//在代碼中根據編號加上前綴名稱就可以得到所需序列幀的全名。具體使用參見下面的Texture序列幀動畫。
    void Awake()
    {
        this.GetComponent<UISprite>().enabled = false;
    }
 
    // Use this for initialization
    void Start()
    {
 
    }
 
    // Update is called once per frame
    void Update()
    {
        if (ActivateWait)
        {
            this.GetComponent<UISprite>().enabled = true;
            if (i < ActivatorTexture.Length)
            {
                if (Time.time > nextFire)
                {
                    nextFire = Time.time + fireRate;
                     this.GetComponent<UISprite>().spriteName= ActivatorTexture;
                    i++;
                }
            }
            else
            {
                i = 0;
            }
        }
        else
        {
            this.GetComponent<UISprite>().enabled = false;
        }
    }

 

 

這里重要的代碼其實就只有一句 this.GetComponent<UISprite>().spriteName= ActivatorTexture; 根據i的索引，動態的改變Spirit的名稱。
其余的是控制播放序列幀的節奏和是否播放序列幀。如圖是我使用此方法做的等待的進度條效果。

 

 

 

3.第二種方法，使用UITexture做序列幀動畫。新建一個UITexture，拖放需要做動畫的序列幀的第一幀到Texture槽中，關於它的參數，在以前的系列教程中都已經解釋的很清楚了，大家可以參考以前的教程。使用UITexture做序列幀動畫的關鍵在於動態改變它的Texture。關鍵代碼：UITexture.mainTexture 。

這里說明一點就是使用該方法做序列幀動畫之前，需要把所有的序列幀圖片放到Resources目錄下。我們在運行的時候動態調用需要的Texture。還有一點需要注意的是，當圖片很多的時候，我們還需要動態卸載已經加載的圖片資源，避免擠爆內存。使用的方法是 ： Resources.UnloadUnusedAssets();


4.有了上面的知識之后，我們就可以動手寫出下面的代碼了：

using UnityEngine;
using System.Collections;

public class AnimateTexture : MonoBehaviour
{

    public string SequenceName_Gewei = "Comp 1_0000";
    public string SequenceName_Shiwei = "Comp 1_000";
    public string SequenceName_Baiwei = "Comp 1_00";
    public int currentFrame;
    public int TargetFrame=0;
    public UITexture TextureUI;
    float timeElipsed = 0.0f;
    
    float fps = 20;
    //public List<Texture2D> ani;

    public int SequenceNum;
        

    void Awake()
    {
        if (TextureUI == null)
        {
            TextureUI = this.GetComponent<UITexture>();
        }      

    }

    // Use this for initialization
    void Start () 
    {
    }
    
    // Update is called once per frame
    void Update () 
    {
        
            AutoPlayTexture();
        

    }

    void AutoPlayTexture()
    {
        timeElipsed += Time.deltaTime;
        if (timeElipsed >= 1.0 / fps)
        {
            timeElipsed = 0;


            if (currentFrame < SequenceNum)
            {
                currentFrame++;
            }
            else
            {
                currentFrame = 0;
            }
            DynamicLoadUnload(currentFrame);
        }
        
    }

    
    //This function can dynamic  load Unload textures from 0 to at least 1000，param currentFrame play;
    void DynamicLoadUnload(int curframe )
    {
        //plane.renderer.material.mainTexture=ani[currentFrame];
        if (curframe < 10)
        {
            TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Gewei + curframe.ToString(), typeof(Texture2D));
        }
        else if (curframe >= 10 && curframe < 100)
        {
            if (curframe % 50 == 0)
                Resources.UnloadUnusedAssets();

            TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Shiwei + curframe.ToString(), typeof(Texture2D));
        }
        else
        {
            if (curframe % 50 == 0)
                Resources.UnloadUnusedAssets();

            TextureUI.mainTexture = (Texture2D)Resources.Load(SequenceName_Baiwei + curframe.ToString(), typeof(Texture2D));
        }
    } 
        
}