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));
}

当我们在非正方形的画布中对材质进行旋转的时候，会遇到一个难以避开的问题，就是拉伸问题。举个例子，当画布是矩形时，暴露了旋转时拉伸的问题：

// 部分代码
void main() {
    vec2 st = textureCoordinate;
    float ratio = inputImageTextureSize.x / inputImageTextureSize.y;
    float animationTime = getAnimationTime();
    float easingTime = animationTime;

    float bigRotation = 30./180.*3.14159;
    st = rotateUv(st, bigRotation*easingTime, vec2(.5, .5), 1.);

    gl_FragColor = texture2D(inputImageTexture, st);
}

这篇文章也提到了这个问题，之所以会出现这个问题，是因为由于宽高的比例不是 1:1，说明虽然 x 和 y 的坐标都是 0~1，但是它们表示的长度是不一样的，正因为这个长度不一样，导致在旋转的时候，像素点的运动并不符合画布的比例：

而解决方案也比较简单，我们在旋转的时候，对 y 轴进行画布比例的拉伸即可：

void main() {
    vec2 st = textureCoordinate;
    float ratio = inputImageTextureSize.x / inputImageTextureSize.y;
    float animationTime = getAnimationTime();
    float easingTime = animationTime;

    float bigRotation = 30./180.*3.14159;

    st.y *= 1./ratio;
    st = rotateUv(st, bigRotation*easingTime, vec2(.5, .5), 1.);
    st.y *= ratio;

    gl_FragColor = texture2D(inputImageTexture, st);
}

三、缩放

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

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

两个动画组合一起：

封装好的代码：

mat2 scale(vec2 _scale){
    return mat2(_scale.x,0.0,
                0.0,_scale.y);
}

四、正弦运动

正弦余弦是非常优美的动画曲线，我们在讲函数可视化也展示过下面这张图（图片来源于bookofshader）：

所以通过这张图你应该知道正弦余弦函数可以做出什么样的效果了，我们来试试：

这是笛卡尔坐标系的运动，假设我们把坐标系变成极坐标系，大家能脑补大概的效果了吗？

假如我想做一个外向扩散的动画，类似雷达那样的效果呢？去掉 sin() 函数即可：

相关链接：