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);
- }
相关链接:
来源: https://juejin.im/post/5ba76ac1e51d450e3d2cdec7