用Shader做动画

上面的图片为表面着色器的输入图片,要用Shader实现动画效果。

首先,定义属性:

Properties {

_MainTex ("Base (RGB)", 2D) = "white" {}

_TexWidth("Sheet Width",float) = 0.0

_CellAmount("Cell Amount",float) = 0.0

_Speed("Speed",Range(0.01,32)) = 12

}

_MainTex即为上面图片的输入接口,_TexWidth为图片的像素长度,以上图片导入到Unity中,大小为1024*256,所以_TexWidth的值应为1024,_CellAmount是上图中动画帧的个数,数一下为9,_Speed是动画播放的速度。

然后,开始编写表面着色器的代码:

void surf (Input IN, inout SurfaceOutput o) {

float2 spriteUV = IN.uv_MainTex;

float cellPixelWidth = _TexWidth/_CellAmount;//计算每个动画帧的长度

float cellUVPercentage = cellPixelWidth/_TexWidth;//计算每个动画帧的百分比

float timeVal = fmod(_Time.y*_Speed,_CellAmount);//时间乘以速度取模动画帧数量

timeVal = ceil(timeVal);//进一法取整

float xValue = spriteUV.x;

xValue += cellUVPercentage*timeVal*_CellAmount;

xValue *= cellUVPercentage;

spriteUV = float2(xValue,spriteUV.y);

half4 c = tex2D (_MainTex, spriteUV);

o.Albedo = c.rgb;

o.Alpha = c.a;

}

虽说效果是做出来了,但是对于它的实现代码还是有些不理解,不理解计算timeVal是什么作用,还有为什么要用_Time.y来乘以速度,为什么要对帧数量取模,下面把UV的x值增加cellUVPercentage*timeVal*_CellAmount不知是为何,还有xValue *= cellUVPercentage;不明白为什么要这样。

有没有人知道这个动画实现的原理?欢迎大家来共同学习探讨。

时间: 2024-11-09 18:01:16

用Shader做动画的相关文章

Android 开发中踩过的坑之十一: 避免使用Shader做动画

进来优化内存, 发现5.0的系统上, Shader有个不算bug的小问题, Shader在绘制时, 会copy自身, 如果使用shader做动画, 就会不断的copy自身, 不断的增加使用内存. 大概2k/s的速度上涨 sdk放出的源码中有一个@hide的方法copy(), 怀疑就是它导致内存不断增长, 但是查不到调用. 解决方法也简单, gc一下, 或者避免使用shader来做动画.

unity shader序列帧动画代码,顺便吐槽一下unity shader系统

http://www.cnblogs.com/hellohuan/archive/2014/01/10/3512784.html 一.看到UNITY论坛里有些人求unity shader序列帧动画,写shader我擅长啊,就顺势写了个CG的shader.代码很简单,就是变换UV采样序列帧贴图,美术配置行数列数以及变换速度. Shader "HELLOHUAN/Hello_Sequence" { Properties { _Color ("Main Color", C

让CALayer的shadowPath跟随bounds一起做动画改变-b

在iOS开发中,我们经常需要给视图添加阴影效果,最简单的方法就是通过设置CALayer的shadowColor.shadowOpacity.shadowOffset和shadowRadius这几个属性可以很方便的为 UIView 添加阴影效果.但是如果单用这几个属性会导致离屏渲染(Offscreen Rendering),而且CoreAnimation在每一帧绘制阴影的时候都需要递归遍历所有sublayer的alpha通道从而精确的计算出阴影的轮廓,这是非常消耗性能的,从而导致了动画的卡顿. 为

沿着贝塞尔曲线做动画

效果图如下: 源码: // // RootViewController.m // // Copyright (c) 2014年 Y.X. All rights reserved. // #import "RootViewController.h" #import "YXGCD.h" @interface RootViewController () @property (nonatomic, strong) GCDTimer *timer; @end @impleme

transition和animation做动画(css动画二)

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以改变元素的形状或位置,做出2d或3d效果: transition:过渡,转变:使css属性值在一段时间内平滑的变化,需要有触发条件(如hover等),是animation的简化版: animation:动画:可以设置多帧效果,然后把它们组合变换,按动画效果展示出来: 1. transition 过渡

用杯赛尔曲线(做动画和绘图)

1. 用被塞尔曲线做动画 效果:位置沿着贝瑟尔曲线位置移动,尺寸由大到小,透明度从完全可见过渡到彻底透明. 至于在DrawRect里面绘制贝塞尔曲线,可以直接百度,没有什么难点的. - (void)clickButton:(id)sender { UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:btn.center]; [path addCurveToPoint:btn.center controlPoint1:

使用requestAnimationFrame做动画效果二

3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于在二月底完工了,中间绕了不少弯路,先把domo放出来: 要实行的功能显而易见,一开始我粗糙地不考虑性能,不使用requestAnimationFrame,已经做出来了,但是觉得不好,于是进行了进一步改进.采用对象的方法,先生成10个粉色的小方块,隐藏起来,然后利用requestAnimationFr

做动画的一大接口 requestAnimationFrame

要实现动画效果,可以有以下几种实现: 1.setInterval setTimeout 2.css3 transition 3.requestAnimationFrame requestAnimationFrame是浏览器自带的api,传入参数为动画效果的执行函数. 因为是浏览器自带的函数,所以执行动画的频率和浏览器显示频率是一致的(目前大部分浏览器显示频率为16.7ms,即1000/60ms),并且在切换到别的tab页之后,也就是页面没被激活时是不执行动画的.和setInterval setT

解决在圆形内做动画而不超出圆外的解决办法

注意:此次动画的目的是在圆内做动画,而动画效果不会超出圆的范围外 在制作这个效果的时候,我一开始想到的就是以下的做法: CSS: .circle{width: 200px;height: 200px;border-radius: 200px;background: rgba(0,0,0,0.5);overflow: hidden;position: absolute;} .text{position: absolute;top: 0;left: 0;-webkit-transform:trans