1.效果:

2.實現原理:

將圖片按寬高切分為x*y(具體可以自己調整)個矩形區域，對每個頂點分配一個隨機值noiseValue(-1到1之間),在頂點著色器中根據這個隨機值而做出不同的y軸位移效果從而實現出分段的下滑或者復原的效果。

3.代碼實現:

首先是頂點著色器的代碼,其中需要用到的aVertexPosition,aUvs,noiseValue會通過外部計算后傳入，animationHeight表示位移的高度，animationParam是用來控制頂點位置的0表示在最底端，1表示在最頂端。

將圖片分成20X10個矩形，即21X11?個頂點，并計算出每個點的noiseValue。

然后計算出頂點坐標，uv，以及三角形索引。

根據之前計算的值生成幾何體，將對應的attribute傳入，然后生成shader和Mesh,此時生成的Mesh即我們所需要的圖片。

給quad添加事件，檔鼠標放上時animationParam變化到1，當鼠標離開時animationParam變化到0。最后添加上遮罩。