頂點動畫、正弦、波長、振幅、周期。

效果預覽

使用步驟

新建材質 Material ， 選擇對應的 Effect ，調整參數。

在場景中新建一個精靈(Sprite) ， SpriteFrame 選取一個超小的圖片。渲染模式選擇平鋪(TILED)，修改節點大小。材質選擇上面創建的材質。

預覽就能看到這張圖片動起來了。

實現原理

為什么選擇平鋪模式可以實現這個效果呢？

簡單的 Sprite 通常是4個頂點。

而通過 Cocos 源碼中發現，Sprite 的平鋪渲染模式的 webgl 實現是平鋪頂點網格。平鋪的數量越多，頂點越多。

所以，只要這張圖片足夠小的話，這個網格就越密集。

如何產生波動效果？

這里用到正弦波公式 y = A sin{ 2π ( t/T - x/λ ) } ，就能實現波動效果。

所以，使用 sin 函數，對每一個頂點的位置坐標做一次偏移，就能達到波動效果啦～

頂點著色器主要代碼如下。

void main () {
    vec4 pos = vec4(a_position, 1);
    // y = A sin{ 2π ( t/T - x/λ ) }
    pos.y = pos.y + sin_A*sin(2.0*3.141592653*(cc_time.x/sin_T - pos.x/sin_lamda));
    // 省略代碼
}

使用 Sprite 的平鋪渲染模式有一個限制條件就是這個紋理要比較簡單且可以重復使用，例如這種純色的波動效果。

如果要使用復雜的紋理波動可以用以下幾種方法。

使用 Sprite 的網格(Mesh)渲染模式，自定義頂點數據，可以參考 初探精靈中的網格渲染模式 。
使用 cc.MeshRenderer 組織頂點數據，參考 飄揚的旗幟！shader 編程實戰！

更多精彩

█ 物理挖洞之分塊 █ █ 漸變色的實現 █ █ 畫線紋理之繩子 █ █ 精靈之網格模式 █ █ shader動畫 之loading █ █ js的三位一體 █ █ shader 之攻擊閃白 █ █ 物理流體(歡樂水杯) █ █ 瞄準線之拋物線 █ █ 隨機(正態分布)飛濺運動 █ █ 貪吃蛇之平滑移動 █ █ 雷達圖的實現 █ █ 分形著色器 █ █ shader 之過渡 █ █ 初探 gizmo 使用 █ █ shader 之卷積濾鏡 █ █ 旗幟效果(meshRenderer) █ █ 多邊形裁剪(meshRenderer) █ █ 高拋平拋發射 █ █ 水紋效果(片元著色器) █ █ 2019年原創(黑歷史) █

小結

y = A sin{ 2π ( t/T - x/λ ) }

以上為白玉無冰使用 Cocos Creator v2.3.3 開發" shader 動畫之旗子/水紋波浪效果！"的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。

每個人都必定在某一方面勝于我，因此我向所有人學習。 -- 《人性的弱點》

---

---

完整代碼(見readme)
原創文章導航

總結

以上是生活随笔為你收集整理的shader 动画之旗子/水纹波浪 ！Cocos Creator !的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。