Shader 动画

Shader 动画和 Canvas 动画原理是一样的，通过定时器循环渲染，并改变画布中图形的属性来实现动画。

一些 Shader 编辑器都已经实现好了定时器的功能，同时会传递一些跟时间相关的值给到着色器代码中，如 ShaderToy 中与时间相关的属性是 iTime/iTimeDelta，gl-transition 中与时间相关的属性是 progress。通过将着色器代码中的变量与时间相结合，就可以让动画产生。

一、位移动画

在之前的文章中讲到了坐标的运算，其中加减就是位移：

那常规的位移动画就不说，下面讲些复杂的运动：

1. 圆周运动

st += vec(cos(u_time), sin(u_time)) 就是圆周运动了：

二、旋转

旋转可以通过矩阵来轻松完成：

但你会发现，当我们把矩阵和坐标相乘，得到的确实上面的圆周运动，这是因为旋转坐标在左下角，如果想旋转矩形，则必须把中心点挪到矩形中心，或者换个说法，把矩形中心挪到左下角。

封装好的代码：

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}
复制代码

三、缩放

缩放就是坐标的乘除运算，同样也可以通过矩形来实现：

同理，如果不对坐标系进行转换，缩放的中心还是在左下角：

两个动画组合一起：

封装好的代码：

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}
复制代码