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

Unity——用代码实现序列帧动画相关推荐

  1. android序列帧动画纯代码,H5序列帧动画实现过程(附源码)

    H需朋者说上事是础一发一开程和开数的目前间5序列帧动画实现过程(新直能分支调二浏页器朋代说,事刚附源码) 序列帧动画 序列帧.轻厅设近幸松.备近幸松.备近幸松.备近动画,又称为逐帧动画,是使用多张连续 ...

  2. Unity序列帧动画——Sprite图片集制作UI动画

    分享一个十分简单的在Unity中制作UI序列帧动画的方法.只需要将动画中要显示的图片导入Unity,将所有图片的TextureType设置成Sprite格式,然后全选所有图片,拖到场景中,提示要创建动 ...

  3. ❤️❤️❤️Unity废柴看过来,手把手教你做植物大战僵尸(二)—— 序列帧动画

    开始制作游戏,首先,我们要把游戏素材导入到项目中,我这里整理出来了一些项目中用到的图片音乐等素材,大家可以下载下来使用,或者自己从网上找其他好看的素材也可以. 植物大战僵尸素材 链接:https:// ...

  4. Unity shader入门精要学习笔记-代码篇6(序列帧动画/滚动背景/流动河流/广告牌/顶点动画的阴影)

    一.序列帧动画 建立一个四边形对着摄像机. 我们需要一张序列帧图像,这里用到8x8的爆炸图. 给四边形上材质和shader,代码如下: Shader "Custom/NewSurfaceSh ...

  5. unity ParticleSystem 实现序列帧动画效果(一)

    用粒子系统实现序列帧动画优势: 先附上一个 介绍序列帧实现方式比较的链接 点击打开链接 在该链接里说较为倾向于使用该方式俩实现序列帧动画,那么具体的好处又有哪些呢? 此处再贴一个链接,这里介绍了下粒子 ...

  6. Unity Shader 序列帧动画

    shader中的序列帧动画属于纹理动画中的一种,主要原理是将给定的纹理进行等分,再根据时间的变化循环播放等分中的一部分. Unity Shader 内置时间变量 名称 类型 描述 _Time floa ...

  7. Unity序列帧动画疑难解答

    **Unity序列帧动画疑难解答 熟悉界面: 界面熟悉很重要,千万不要发生与别人沟通时你说菜单他去找工具栏的情况. **菜单栏:**基础创建设置工具等功能入口 **工具栏:**软件内的基本操作工具,基 ...

  8. Unity图片序列帧动画

    unity制作序列帧两种简单方法 1.美术将整个序列帧动画图片分割为多个png图片,如 然后选中所有,鼠标拖入Hierarchy面板,unity就会自动生成序列帧动画游戏对象,点击unity播放按钮就 ...

  9. UnityShader22:序列帧动画

    一.序列帧动画 序列帧动画的原理是如此的简单,可以说只需要足够多张纸以及足够多的时间,就可以实现最简单的动画: 不使用 Animation 工具,只需要使用 Shader 中的内置时间变量,就可以实现 ...

最新文章

  1. 在CentOS 6.3 64bit上为Apache Traffic Server 4.2.3挂载SSD并压测
  2. TCP 和 UDP的理解
  3. BCH或许才是真正的未来
  4. C#第三方控件的使用
  5. jquery.desktop.js 代码分析
  6. HiveSQL中复杂数据类型操作
  7. 拉杰尔安卓服务器注册上限,拉结尔多开养小号刷副本 用多多云手机离线能升级...
  8. CSRF***与防御
  9. (六)JS基础知识三(走进作用域和闭包)【三座大山之二,不会闭包,基本不会通过】
  10. iOS设计模式 ——单例模式详解以及严格单例模式注意点
  11. mysql linux文件_MySQL在Linux系统下配置文件详解
  12. Oracle 内核参数
  13. 从最小样本中识别鸟类
  14. javascript 笔记--变量
  15. Origin中多峰拟合方法
  16. 02-Spring的核心API
  17. 微信小程序---购物车功能(选中与取消选中,全选与取消全选)
  18. 计算机wifi无法打开,教你win10系统WiFi热点无法打开的修复教程
  19. 秀米怎么添加pdf附件「教程」
  20. 什么是UID、UED、UXD、IXD、UCD、IAD,看这篇就足够了

热门文章

  1. VSCode调试代码的三种方式
  2. 公告:CSDN个人空间即将改版
  3. Android 平台下的原生 Markdown 解析器
  4. memcpy函数详解
  5. airpods耳机敲击没反应_airpods怎么敲击切歌_airpods如何设置敲击切歌
  6. LeetCode - 362 敲击计数器(设计)
  7. 利用监听器实现网站在线人数统计
  8. 开关电源产生浪涌电流的原因
  9. 【PyQt】PyQt+百度API实现图像识别应用(附代码)
  10. “我知道”和“我做到了”的差距