unity2D使用序列幀做動畫，一般都用2d SpriteRenderer，它的好處是能夠沿用圖片原有的大小和錨點。特別是我們使用TexturePacker打圖集的時候並且Trim邊緣空白的時候，可以直接使用它，而不用在程式中調整它的位置等資訊。

然而我們如果使用UGUI系統，SpriteRender缺有挺多衝突，特別是當我們組合使用的時候，渲染順序導致的問題很多。所以我期望有一個基於UGUI的動畫解決方案。

研究了一下，unity官方貌似並不提供這種基礎元件，於是沒辦法，自己寫了一個。如果你有更好的辦法，請告訴我。

我自己基本的實現需求和原理是
* 要求在Editor模式下所見即所得的看到序列幀切換動畫效果
* 要求能夠讀入並延續Sprite上自帶的位置、錨點資訊
* 輕量級
* 要求能夠翻轉，能夠被外部程式所控制

實現程式碼見後文，使用方法：
* 將此指令碼與Image繫結在同一個GameObject上
* 將你要使用的序列幀隨便一幀繫結到sprite引數上
* 調整xoffset和yoffset，保證對齊到錨點
* 如果需要翻轉，請將第一步的GameObject繫結到一個長寬為0的父節點上，並且點選EnableFlipX
* 在程式碼中呼叫，只需修改sprite或flipX屬性後，呼叫Refresh()方法即可

/// <summary>
/// UGUI animation Component.
/// 
/// 使用方法：把他和Image元件掛在同一個GameObject上，調整好偏移。
/// 動畫不要修改Image元件的sprite，修改本元件sprite即可。
 

/// 
/// author:CG 
/// hanjiasongshu.com
/// </summary>
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Collections.Generic;
using System;

[ExecuteInEditMode]
public class UGUIAnimation : MonoBehaviour {

    public Sprite sprite;
    public float xoffset = 0;
    public float
 
 yoffset = 0;
    public Color color = Color.white;

    /// <summary>
    /// 啟動flipx，需要有一個parent GameObject
    /// </summary>
    public bool enableFlipX = false;
    public bool flipX;

    void OnValidate(){
        Refresh();
    }

    public void Refresh(){
        SetSprite(sprite);
    }

    void SetSprite(Sprite s){
        if(s == null ) return;
        var image = this.GetComponent<Image>();
        image.sprite = s;
        image.rectTransform.sizeDelta = new Vector2( s.rect.width, s.rect.height);
        var pos1x = 0.5f * s.rect.width - s.pivot.x;
        var pos1y = 0.5f * s.rect.height - s.pivot.y;

        image.transform.localPosition = new Vector3( pos1x + xoffset, pos1y + yoffset);
        image.color = color;
        if(enableFlipX){
            if(flipX){
                this.transform.parent.transform.localRotation = new Quaternion(0, -180f, 0, 0);    
            }else{

                this.transform.parent.transform.localRotation = new Quaternion(0, 0, 0, 0);    
            }    
        }
    }
}