Unity4.6 UI自定义UI动画

 

UI系统集成了Unity 的动画系统,即您可以使用状态机或者其他的动画特性来控制UI元素或面板,这种做法稍微有点复杂,而且在关联事件上也有点复杂,那么我们如何自定义实现动画呢,下面以更改CanvasRender的Opacity为例,并且自定义UI动画开始及动画结束事件,我们新建一个名为TweenPlayer的脚本文件


using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UnityEngine;

namespace Assets.Common
{
public class TweenPlayer : MonoBehaviour
{
public delegate void TweenEvent(GameObject gb);

public event TweenEvent TweenStart;

public event TweenEvent TweenFinished;

/// <summary>
///获取当前对象脚本上的Tween动画
/// </summary>
/// <param name="gb"></param>
/// <returns></returns>
public static TweenPlayer GetTween(GameObject gb)
{
TweenPlayer player = gb.GetComponent<TweenPlayer>();
if (player == null)
{
player = gb.AddComponent<TweenPlayer>();
}
return player;
}

/// <summary>
/// 淡入
/// </summary>
/// <param name="time"></param>
public void FadeIn(float fadetime)
{

StopAllCoroutines();
StartCoroutine(Fade(fadetime, 0));
}
/// <summary>
/// 淡出
/// </summary>
/// <param name="time"></param>
public void FadeOut(float fadetime)
{
StopAllCoroutines();
StartCoroutine(Fade(fadetime, 1));
}

private IEnumerator Fade(float fadeTime, float toValue)
{
StartTween();
float elapsedTime = 0;
while (elapsedTime < fadeTime)
{
elapsedTime += Time.unscaledDeltaTime;
float percentage = Mathf.Clamp01(elapsedTime / fadeTime);
SetAlpha(percentage, toValue);
yield return null;
}
FinishTween();
}

/// <summary>
/// 动画执行开始
/// </summary>
private void StartTween()
{
if (TweenStart != null)
TweenStart(this.gameObject);
}

/// <summary>
/// 动画执行结束
/// </summary>
private void FinishTween()
{
if (TweenFinished != null)
TweenFinished(this.gameObject);
}

/// <summary>
/// 设置目标透明度
/// </summary>
/// <param name="percentage">当前透明度</param>
/// <param name="toValue">目标透明度</param>
private void SetAlpha(float percentage, float toValue)
{
float alpha = Mathf.Abs(percentage - toValue);
Component[] components = this.gameObject.GetComponentsInChildren<Component>();
foreach (Component c in components)
{
SetAlphaByType(c, alpha);
}
}
//UGUI
/// <summary>
/// 根据ComPonent的类型设置Component透明度
/// </summary>
/// <param name="c"></param>
private void SetAlphaByType(Component c, float alpha)
{
switch (c.GetType().ToString())
{
case "UnityEngine.CanvasRenderer":
(c as CanvasRenderer).SetAlpha(alpha);
break;
case "UnityEngine.UI.Image":
(c as UnityEngine.UI.Image).color = new Color
(
(c as UnityEngine.UI.Image).color.r,
(c as UnityEngine.UI.Image).color.g,
(c as UnityEngine.UI.Image).color.b,
alpha
);
break;
}
}

}
}

下面我们看下调用脚本(首先将脚本绑定到需要执行动画的UI组件上)


void Update()
{
if (Input.GetMouseButton(0))
{
Assets.Common.TweenPlayer player = Assets.Common.TweenPlayer.GetTween(this.gameObject);
player.TweenStart += delegate(GameObject gb)
{
Debug.Log("Start");
};
player.TweenFinished += delegate(GameObject gb)
{
Debug.Log("End");
};
player.FadeOut(0.5f);
}
if (Input.GetMouseButton(1))
{
Assets.Common.TweenPlayer player = Assets.Common.TweenPlayer.GetTween(this.gameObject);
player.TweenStart += delegate(GameObject gb)
{
Debug.Log("Start");
};
player.TweenFinished += delegate(GameObject gb)
{
Debug.Log("End");
};
player.FadeIn(0.5f);
}
}