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);
}
复制代码