Shader 動畫

摘要： Shader 動畫和 Canvas 動畫原理是一樣的，通過定時器迴圈渲染，並改變畫布中圖形的屬性來實現動畫。 一些 Shader 編輯器都已經實現好了定時器的功能，同時會傳遞一些跟時間相關的值給到著色器程式碼中，如 ShaderToy 中與時間相關的屬性是 iTime/iTimeDelta...

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);
}
複製程式碼