逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。

例如下面这张图:

这是一个精灵集,可以分解成八个动作。如果我们可以控制对象在一个时间间隔里只播放一个动作,那么看起来就是一个跑步的动画。

在实现帧动画之前,我们首先要知道UV坐标,UV坐标是表示场景对象上的某个点对应在贴图里的位置。

我们首先实现一个最简单的shader(参考Shader山下(一)第一个Shader)

Shader "Custom/TestUV" {Properties {_MainTex ("Albedo (RGB)", 2D) = "white" {}}SubShader {Tags { "RenderType"="Opaque"}LOD 200CGPROGRAM#pragma surface surf Lambertsampler2D _MainTex;struct Input {float2 uv_MainTex;};void surf (Input IN, inout SurfaceOutput o) {fixed2 texUV = IN.uv_MainTex;fixed4 c = tex2D (_MainTex, texUV);o.Albedo = c.rgb;o.Alpha = c.a;}ENDCG}FallBack "Diffuse"
}

为场景里的一个Plane添加使用这个shader的材质。

我们可以看到编辑器里显示:

将上面的图片拖到Texture里面,并将Tiling的X和Offset的X都改为0.125,我们就可以看到:

这便显示的是第二个动作,修改Offset的X为0.25便显示第三个动作,以此类推。

UV坐标的两个分量x,y都在[0,1]范围内,表示贴图横纵的标准化坐标,从(0,0)贴图的左下角,到(1,1)贴图的右上角,在这个范围外的会折叠到这个范围内(例如8.25就会转换成0.25)。

Tiling表示UV坐标的缩放倍数,计算UV的时候会乘以这个倍数,类似于UV=UV*Tiling。

Offset表示UV坐标的偏移量,在计算UV的时候会加上这个偏移量,类似于UV=UV+Offset。

最后的算法类似于UV=UV*Tiling+Offset。

当我们设置Tiling的X为0.125,就意味着最后所得出来的UV值都被限定在[0,0.125]之间,这样就只会显示一个动作。

将Offset的X设置为0.25,就意味着最后得出来的UV值被限定在[0.25,0.375]之间,也就是第三个动作。

那么怎么使用shader来实现帧动画呢?

修改上面的shader在Properties里添加:

     _CellAmount("Cell Amount", float) = 1_Speed("Speed", Range(0.01, 32)) = 12

并在 CGPROGRAM之后,ENDCG之前添加:

     half _CellAmount;half _Speed;

_CellAmount表示动作的数量,_Speed表示播放的速度。

修改surf代码:

     void surf (Input IN, inout SurfaceOutput o) {fixed2 texUV = IN.uv_MainTex;half cellUVX = 1 / _CellAmount;half timeVal = ceil(fmod(_Time.y * _Speed, _CellAmount));fixed uvx = texUV.x;uvx *= cellUVX;uvx += timeVal * cellUVX;texUV = fixed2(uvx, texUV.y);fixed4 c = tex2D (_MainTex, texUV);o.Albedo = c.rgb;o.Alpha = c.a;}

第一行,取出贴图的uv坐标。

第二行,计算一个动作的尺寸(UV坐标系下)。

第三行,根据时间和速度计算当前应该显示那个动作。

第四行,取出uv坐标的x分量。

第五行,乘以单个动作的尺寸(相当于Tiling)。

第六行,加上偏移量(相当于Offset)。

第七行,重新赋值uv坐标。

第八行:取出uv坐标的色彩值。

第九行:赋值色彩值。

第十行:赋值Aplha通道。

在编辑器里,复原Tiling(1,1)和Offset(0,0),并把Cell Amount设置为8,然后点击播放,我们就可以看到一个奔跑的动画了。

Shader山下(三)逐帧动画相关推荐

  1. 1.逐帧动画shader

    最近项目压力不大,抽时间看了些关于shader和游戏引擎的书籍,准备开始shader的学习. 在网上看到这位前辈(http://blog.sina.com.cn/s/articlelist_23127 ...

  2. 计算机类说课比赛视频,全国“xx杯”计算机类说课大赛课件一等奖作品:制作逐帧动画说课课件...

    <全国"xx杯"计算机类说课大赛课件一等奖作品:制作逐帧动画说课课件>由会员分享,可在线阅读,更多相关<全国"xx杯"计算机类说课大赛课件一等 ...

  3. 逐帧动画与夸张表情动画

    夸张表情动画的制作(1)   (转之ET动画学堂) 夸张表情动画在网络上应用非常广泛,最 常见的莫过于qq和msn的自定义表情, 这种表情动画是最初级的逐帧动画,使用常见的flash.easytoon ...

  4. 安卓学习笔记33:实现逐帧动画

    文章目录 一.逐帧动画 (一)逐帧动画概念 (二)逐帧动画实现方式 二.利用动画资源文件实现逐帧动画 - 功夫熊猫 (一)运行效果 (二)涉及知识点 (三)实现步骤 1.创建安卓应用[PandaAni ...

  5. android语音动画,Android逐帧动画的简单使用-语音播放效果的实现

    逐帧动画(Frame-By-Frame Animation)原理很简单,即快速切换不同的图片,形成动画效果.Android中逐帧动画的实现方式也很简单,下面以语音播放效果为例说明. 1. 首先准备图片 ...

  6. 初二计算机考试如何制作动漫,初中信息技术《制作简单逐帧动画》教案

    一.教学目标 1.能说出帧和关键帧的含义,能独立使用Flash制作逐帧动画. 2.通过合作探究的方法,学会制作逐帧动画,提升动手操作及协作的能力. 3.通过制作逐帧动画,加深对Flash软件的认识,体 ...

  7. Android逐帧动画——让图片动起来

    Android逐帧动画--让图片动起来 前言:逐帧动画要求开发者把动画过程的每张静态图片都收集起来,然后由android来控制依次显示这些静态图片,然后利用人眼视觉暂留的原理,给用户造成"动 ...

  8. 前端逐帧动画性能探究和比较

    什么是逐帧动画? 首先看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简单的来说就是: 以一定的速度切换几张连续图像,让它动起来 ...

  9. 生日贺卡---flash逐帧动画练习

    舟舟的一个客户过生日,给他准备的生日礼物是一个MP4,舟舟想在MP4里放一段祝客户生日快乐的动画贺卡,于是做了这个小动画.别看只有几秒钟,全是逐帧哦!关键帧有近30帧,做这个动画花费了我三个晚上的时间 ...

最新文章

  1. 2017年5月面试总结
  2. The following profiles are active: dev
  3. NeurIPS 2020 | FixMatch:通过图像增强就能实现半监督学习
  4. CentOS 初体验十六:阿里云安装Nexus搭建Maven私有仓库
  5. x86架构下 CF与OF标志位 带符号和无符号运算 详解
  6. 第四章切比雪夫不等式、大数定理、中心极限定理
  7. 论文浅尝 | 引入“引用”的语言模型
  8. 关于收集,标准化和集中化处理Golang日志的一些建议
  9. 颜色模型和颜色应用---小结
  10. 二叉树的非递归遍历,还有一点黑科技
  11. python培训班-Python培训机构有哪些值得推荐?
  12. wordpress 增加备案号
  13. C语言程序设计(第五版)-谭浩强著-课后习题
  14. Photoshop常见疑问解答(转)
  15. 快快编程kkcoding/太戈编程Tiger AI答案库 (每月更新)第三期 答案仅供参考,不能保证100%的准确性
  16. Spring实战(第4版)阅读笔记(一)
  17. 必看 | 机器视觉基础入门
  18. SQL中计算字符串的长度函数
  19. salve mysql_mysql 同步实现, master-salve
  20. Python中的re.search和re.group用法

热门文章

  1. 使用JNative遇到的小问题
  2. 【华为云计算产品系列】云上容灾架构实战部署详解
  3. Gtalent如何帮助HR确定人才测评指标
  4. Python 异步 async/await(进阶详解)
  5. AP6255 蓝牙驱动移植
  6. 使用 C# 和 Unity 实现金庸群侠传开源3D版
  7. 再见UE之VS Code初体验---实现远端Linux C开发配置
  8. java e4_请问,eclipse e4 究竟是什么?愿能集思广益
  9. 分析CRM客户管理系统哪家做的好?
  10. 拼多多打单系统服务器繁忙怎么办,为什么多多打单管理系统打不开?多多打单功能有什么?...