Shader学习第十二篇：ShaderGraph实现序列帧动画

介绍

上篇我们介绍了ShaderLab编程实现序列帧动画，这里我们介绍一下如何使用可视化界面ShaderGraph来实现。
在使用ShaderGraph的过程中，我们可以了解ShaderGranph的一些操作，由于上篇文章已经分享了原理方面的知识，这里不再赘述。我们便开始ShaderGraph来实现序列帧动画。

获取源文件

关注公众号：科技探幽
回复 帧动画

步骤

1、把项目配置为URP管线
2、在场景中新建一个Quad；
3、然后再创建一个材质，命名为SequenceAnimation，把材质拖到Quad上；
3、再创建一个无光照的ShaderGraph文件，命名为SequenceAnimation，把ShaderGraph拖到上面的创建的材质上

Shader Graph流程

1、再Graph Settings下把类型设置为透明

2、在左侧面板下创建Texture 2D

3、把Texture 2D拖到操作视图中

4、创建节点Sample Texture 2D节点

5、把Sample Texture 2D节点与Texture 2D相连

这里我们把序列帧图片引入进来，鼠标单击TexTure2D，出现配置视图，如图所示

6、创建Tilling And Offset

7、连接如图所示，下图中Tilling代表压缩倍数，Offset代表偏移量。由于我们的序列帧图片是8x8的，所以此处Tilling应设置为1/8，我们可以增加两个

8、我们新建两个Float变量，分别为Horizontal，Vertical，代表序列帧图片行与列。1/Horizontal，1/Vertical代表图片的压缩倍数。并与Tilling相连。这里可以看出后面的图片效果，只显示了其中一帧图片。

9、下面我们来操作偏移量，序列帧动画的精髓都在偏移量上，只要正确的操作了偏移量，那么我就实现序列帧动画。新建一个vector2节点，与Offset相连。而vector2的x代表x轴方向上的偏移，y代表y轴方向上的偏移。

10、下面我们计算x，y的值，

time =floor(Time*Speed)
y = -floor(time/Horizontal)
x = time-y*Vertical

如果对这个算法不熟悉，可以看我上篇文章。
创建Speed变量控制动画播放速度。创建Time节点与Speed相乘

11、根据上面的算法，我们继续创建节点，算出y值。由于UV的坐标原点在左下角，而序列帧图片是从左上角开始计算，所以这里最后要做取反操作。最后在与Vector2的y相连。

12、下面计算x的值，并与Vector2的x相连

13、由于12步中的Vector2的输出为大于1的值，这里我们仅仅计算了偏移，还需要再转为小数，因为UV的范围在0~1。
让12步中的Vector2与第8步中与Tilling相连的Vector2相乘，得到正确的偏移量。如图所示。

14、这里我们ShaderGraph就完成了，我们来看看整体效果