web文字的水波效果

1.目标——SVG水波文字（难度：2.3）

我们的目标是利用之前学习的SVG滤镜技术，实现文本被点击时，产生水波；水波从剧烈晃动，到逐渐平静的效果.

2.分析需求——庖丁解牛

1.水波的形态可以用我们之前学过的柏林噪声滤镜feTurbulence，结合feDisplacementMap扭曲文本像素。具体请参考《SVG滤镜（二）》

2.水波的动态效果，需要我们改变噪声的频率

3.水波逐渐恢复平静的过程，通过逐渐降低噪声频率，同时降低像素的位移幅度实现.关于SMIL动画的只是不再赘述，请参考《SVG蒙版和图案》

4.通过鼠标点击启动波动动画

...

6.鼠标点击启动

我们希望文字水波效果在鼠标点击的时候启动，然后慢慢停止。这个只需要在SMIL动画的begin属性中写

  id .  click

id是被点击元素的ID，click表示点击后启动,注意id不要有连字符之类的其他特殊字符，否则无法识别.最后还要将默认的噪声频率变成0！

...

链接：https://pan.baidu.com/s/1UGIdonysL--Av5cJ-e5AeQ 
提取码：agky