Unity代码实现序列帧动画播放器

 更新时间:2020年6月25日 11:15  点击:1591

序列帧动画经常用到,最直接的方式就是用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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • ps动态环绕动画效果怎么制作

    ps动态环绕动画效果是现在很多人都非常喜欢的,大多数人还不知道ps动态环绕动画效果怎么制作下面文章就给大家介绍下ps怎么制作科技感十足的动态环绕动画效果,一起来看看...2017-07-06
  • 详解vue过度效果与动画transition使用示例

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,Vue 提供了内置的过渡封装组件transition,该组件用于包裹要实现过渡效果的组件...2021-10-10
  • jQuery动画效果相关方法实例分析

    这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下...2016-01-05
  • Unity时间戳的使用方法

    这篇文章主要为大家详细介绍了Unity时间戳的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • 利用PS制作“签名”GIF小动画的例子

    本文章来为各位介绍一篇利用PS制作“签名”GIF小动画的例子,希望这个制作过程能够帮助到各位朋友,各位进入看看吧。 先给大家看下效果,有兴趣的童鞋&rarr;_&rarr;可以...2016-09-14
  • 微信小程序实现登录页云层漂浮的动画效果

    微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
  • 公众号SVG动画交互实战代码

    这篇文章主要介绍了公众号SVG动画交互实战代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • 原生JS实现音乐播放器

    这篇文章主要为大家详细介绍了原生JS音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-01-26
  • Unity中 ShaderGraph 实现旋涡传送门效果入门级教程(推荐)

    通过Twirl 旋转节点对Gradient Noise 梯度噪声节点进行操作,就可得到一个旋转的旋涡效果。具体实现代码跟随小编一起通过本文学习下吧...2021-07-11
  • jQuery开发仿QQ版音乐播放器

    这篇文章主要介绍了jQuery开发仿QQ版的音乐播放器,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-10
  • js实现缓动动画

    这篇文章主要为大家详细介绍了js实现缓动动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-25
  • Unity延时执行的多种方法小结

    本文主要介绍了4种延时执行的方法,主要包括Update计时器,Invoke,协程,DoTween,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-07
  • Unity shader实现遮罩效果

    这篇文章主要为大家详细介绍了Unity shader实现遮罩效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

    这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下...2016-01-05
  • unity 如何判断鼠标是否在哪个UI上(两种方法)

    这篇文章主要介绍了unity 判断鼠标是否在哪个UI上的两种实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-10
  • jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

    这篇文章主要介绍了jQuery实现的点赞随机数字显示动画效果,并附带在线演示与demo源码供读者下载.涉及jQuery鼠标事件响应及基于animate动画效果实现技巧,需要的朋友可以参考下...2016-01-05
  • JS实现点击登录弹出窗口同时背景色渐变动画效果

    这篇文章主要介绍了JS实现点击登录弹出窗口同时背景色渐变动画效果,涉及JavaScript基于鼠标事件及时间函数定时触发形成渐变动画的相关技巧,需要的朋友可以参考下...2016-03-28
  • Unity实现换装系统

    这篇文章主要为大家详细介绍了Unity实现换装系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-11
  • Photoshop利用智能对象将人物制作成花海里飘散消失的GIF动画教程

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说一说利用智能对象将人物制作成花海里飘散消失的GIF动画的教程,各位想知道具体方法的使用者们,那么大家就快来...2016-09-14
  • 利用unity代码C#封装为dll的步骤分享

    这篇文章主要给大家介绍了关于利用unity代码C#封装为dll的相关资料,文中通过图文将实现的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25