介绍
上篇我们介绍了ShaderLab编程实现序列帧动画，这里我们介绍一下如何使用可视化界面ShaderGraph来实现。 在使用ShaderGraph的过程中，我们可以了解ShaderGranph的一些操作，由于上篇文章已经分享了原理方面的知识，这里不再赘述。我们便开始ShaderGraph来实现序列帧动画。
更多Shader文章以及源码
查看更多关于Shader系列文章，包括Shader以及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就完成了，我们来看看整体效果
