逐帧动画是一种常见的动画形式(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. vs05b2中给dataset添加表间关系
  2. 大容量磁盘分区表、文件系统、分区工具的选择
  3. 1776: Press the switch(思维题)
  4. MVC4将Controller与views分开
  5. nodejs path.parse()
  6. 对c语言字符数组描述错误的是,下述对C语言字符数组的描述中错误的是( )。
  7. subroutines of perl
  8. 学生成绩统计c语言课程设计,学生成绩管理系统-C语言课程设计
  9. golang 接口_「Golang系列」 深入理解Golang Empty Interface (空接口)
  10. aws搭建java项目_AWS 创建开源 UI 项目:这是新开源设计系统的第一步
  11. ES6新特性_ES6语法糖class介绍与初体验_就是个语法糖而已---JavaScript_ECMAScript_ES6-ES11新特性工作笔记033
  12. html文档中怎么区分节点对象节点类型,JavaScript文档对象模型-Element类型
  13. WinXP中自带的netsh命令自动切换IP(zz)
  14. Ubuntu 挂载ISO文件
  15. 计算机发展对文学的影响,论计算机技术对文学接受的影响
  16. ToolBoxFeatureDataZoomOpts:工具箱区域缩放配置项
  17. 用c加加创建c语言项目,如何使用visual studio 2017创建C语言项目
  18. 哪些是GraphPad Prism 的当前版本?如何更新或升级?
  19. 恢复matlab文件关联
  20. 微信小程序 获取formId

热门文章

  1. 严重失眠?湿气重?肚子上放个它,整夜哗哗排湿,睡的香!打雷都叫不醒!...
  2. 串口工作在DMA模式下有时接收异常
  3. swf如何转化为mp4格式?
  4. flage的值作为全局变量进行传递
  5. python异步处理请求_python异步处理HTTP请求
  6. DeepWalk算法(个人理解)
  7. 文件的逻辑结构与物理结构的对比与区别
  8. 【FPGA】VGA显示文字、彩条、图片——基于DE2-115
  9. PCTP考试学习笔记之一:深入TIDB体系架构(下)
  10. 计算机主机结构三部分,计算机主机结构