前言

使用ShaderGraph的过程中，我们可以了解ShaderGranph的一些操作，我们便开始ShaderGraph来实现序列帧动画。

一、步骤

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就完成了，我们来看看整体效果