一直对svg有好感,svg的好处就不说了把, 可以自己去google.花了一周时间去学习使用svg模拟水波效果的方法.
最开始以为可是不像canvas那样避免使用帧动画的方式,利用svg矢量图形path对象的animate来实现,也就是形状补间动画的方式,可是失败了, 因为做出来的效果真是不太让人满意,无法模拟出水波的正常波动性. 所以查找了好多资料, 基本上都是利用的帧动画, 前端技术一般都是使用的 canvas.当然canvas在做动画方面的性能的确要比svg强, 但是还是尝试用svg实现一个svg的水波效果.

下面的是用形状补间动画的方式,效果如下: