shader 动画之旗子/水纹波浪 ！Cocos Creator !

顶点动画、正弦、波长、振幅、周期。

效果预览

使用步骤

新建材质 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*si