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

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

See the Pen snap.svg测试 by lu (@xueyan) on CodePen.

我能做到的最好的表现只能是这样了, 效果不是很令人满意,下面看一下帧动画 每一帧不同的path值来模拟,

See the Pen svg water wave by lu (@xueyan) on CodePen.

上面的实现效果明显更可以让人接受, 但是这样带来的应该是更多了性能消耗.上面同时模拟了水波被外界影响的波动效果,视觉上面还是不错的

具体的代码如下, 主要是实现方式,不要说代码有多烂:

注:
转载请注明出处,谢谢! http://hi.gitcafe.com/2014/06/30/snap-wave/#more
gist地址: https://gist.github.com/luxueyan/beead000c11be6edc72a
codepen地址: http://codepen.io/xueyan/pen/FsyHz
参考地址: http://gamedev.stackexchange.com/questions/44547/2d-water-with-dynamic-waves