时间:2021-05-20
序列帧动画经常用到,最直接的方式就是用Animation录制。但某些情况下这种方式并不是太友好,需要靠代码的方式进行序列帧动画的实现。
代码实现序列帧动画,基本的思路是定义一个序列帧的数组/列表,根据时间的流逝来确定使用哪一帧并更新显示。
NGUI的UI2DSpriteAnimation已经实现了此功能,但是它支持的目标只有Native2D的SpriteRenderer组件或者NGUI自身的UI2DSprite组件,并不支持UGUI的Image组件。
当然可以通过改写源码的方式来添加对Image组件的支持,不过秉着学习的目的,我这里重新写了一个同时支持Image组件和SpriteRenderer组件的序列帧动画播放器。
代码如下,注释写的很详细了,不再赘述。
using UnityEngine;using UnityEngine.UI;using System;/// <summary>/// 序列帧动画播放器/// 支持UGUI的Image和Unity2D的SpriteRenderer/// </summary>public class FrameAnimator : MonoBehaviour{ /// <summary> /// 序列帧 /// </summary> public Sprite[] Frames{ get { return frames; } set { frames = value; } } [SerializeField]private Sprite[] frames = null; /// <summary> /// 帧率,为正时正向播放,为负时反向播放 /// </summary> public float Framerate { get { return framerate; } set { framerate = value; } } [SerializeField] private float framerate = 20.0f; /// <summary> /// 是否忽略timeScale /// </summary> public bool IgnoreTimeScale{ get { return ignoreTimeScale; } set { ignoreTimeScale = value; } } [SerializeField]private bool ignoreTimeScale = true; /// <summary> /// 是否循环 /// </summary> public bool Loop{ get { return loop; } set { loop = value; } } [SerializeField]private bool loop = true; //动画曲线 [SerializeField]private AnimationCurve curve = new AnimationCurve (new Keyframe (0, 1, 0, 0), new Keyframe (1, 1, 0, 0)); /// <summary> /// 结束事件 /// 在每次播放完一个周期时触发 /// 在循环模式下触发此事件时,当前帧不一定为结束帧 /// </summary> public event Action FinishEvent; //目标Image组件 private Image image; //目标SpriteRenderer组件 private SpriteRenderer spriteRenderer; //当前帧索引 private int currentFrameIndex = 0; //下一次更新时间 private float timer = 0.0f; //当前帧率,通过曲线计算而来 private float currentFramerate = 20.0f; /// <summary> /// 重设动画 /// </summary> public void Reset () { currentFrameIndex = framerate < 0 ? frames.Length - 1 : 0; } /// <summary> /// 从停止的位置播放动画 /// </summary> public void Play () { this.enabled = true; } /// <summary> /// 暂停动画 /// </summary> public void Pause () { this.enabled = false; } /// <summary> /// 停止动画,将位置设为初始位置 /// </summary> public void Stop () { Pause (); Reset (); } //自动开启动画 void Start () { image = this.GetComponent<Image> (); spriteRenderer = this.GetComponent<SpriteRenderer> (); #if UNITY_EDITOR if (image == null && spriteRenderer == null) { Debug.LogWarning ("No available component found. 'Image' or 'SpriteRenderer' required.", this.gameObject); } #endif } void Update () { //帧数据无效,禁用脚本 if (frames == null || frames.Length == 0) { this.enabled = false; } else { //从曲线值计算当前帧率 float curveValue = curve.Evaluate ((float)currentFrameIndex / frames.Length); float curvedFramerate = curveValue * framerate; //帧率有效 if (curvedFramerate != 0) { //获取当前时间 float time = ignoreTimeScale ? Time.unscaledTime : Time.time; //计算帧间隔时间 float interval = Mathf.Abs (1.0f / curvedFramerate); //满足更新条件,执行更新操作 if (time - timer > interval) { //执行更新操作 DoUpdate (); } } #if UNITY_EDITOR else { Debug.LogWarning ("Framerate got '0' value, animation stopped."); } #endif } } //具体更新操作 private void DoUpdate () { //计算新的索引 int nextIndex = currentFrameIndex + (int)Mathf.Sign (currentFramerate); //索引越界,表示已经到结束帧 if (nextIndex < 0 || nextIndex >= frames.Length) { //广播事件 if (FinishEvent != null) { FinishEvent (); } //非循环模式,禁用脚本 if (loop == false) { currentFrameIndex = Mathf.Clamp (currentFrameIndex, 0, frames.Length - 1); this.enabled = false; return; } } //钳制索引 currentFrameIndex = nextIndex % frames.Length; //更新图片 if (image != null) { image.sprite = frames [currentFrameIndex]; } else if (spriteRenderer != null) { spriteRenderer.sprite = frames [currentFrameIndex]; } //设置计时器为当前时间 timer = ignoreTimeScale ? Time.unscaledTime : Time.time; }}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了UnityShader序列帧动画效果的具体代码,供大家参考,具体内容如下实现原理主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标
当我们需要制作动态炫酷科技感很强的UI时,美术一般会给我们提供一些序列图,这时候我们只需在程序里实现序列动画。一.动画机unity自带的帧动画机很方便,我们首先
此实例实现了美工和代码的分离,播放器界面部分可任意的修改,控制台也可以任意添加删减。播放器界面:1、新建Flash文档文件,命名保存。2、选中图层1的第一帧,把
vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果需求分析:类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时
逐帧动画(Frame-by-frameAnimations)顾名思义就是一帧接着一帧的播放图片,就像放电影一样。可以通过xml实现也可以通过java代码实现。逐