上一篇讲了一个波浪的动画效果，这篇来讲讲这个效果在文字上的应用，效果如下所示：
当然这个效果也可以使用CSS中的也是使用SVG来实现，不过综合用到了SVG中的蒙版(mask)和pattern元素。下面来一步一步实现这个效果。
SVG形状准备
开始之前，要做点准备工作，就是准备一个波浪的型状，就像上一篇文章讲的那样。
很多的图形设计软件都支持矢量形状的设计并导出为SVG格式，比如AI。像这一篇文章所说的效果需要准备下图所示的矢量形状。
设计好形状后，不断的重复平铺这个形状，形成一个长长的波浪。
然后移动它的X轴上的位置，就可以形成一个波浪在滚动的动画效果。
形状准备好了，接下来准备开工，当然这里也可以使用CSS来实现，但是由于浏览器对最新的一些属性支持的不好。这里我们使用SVG这简单高效的方法，而且浏览器支持也不错。
SVG实现
开始之前，推荐去阅读下Sara写的一篇关于CSS和SVG的一篇文章。
这里主要是使用SVG中的蒙版来实现这个动画效果。
<defs>
<text id="text" font-size="100">YOUR TEXT HERE</text>
<mask id="text-mask">
<use x="0" y="0" xlink:href="#text" fill="#ffffff"/>
</mask>
</defs>
把文字元素和蒙版定义在defs元素中方便后面复用，只需要写一次，在需要用的地方使用use元素中的xlink:href属性来引用就可以了。
这里需要注意的是，在蒙版中使用了白色来填充文字。这是因为在SVG中的蒙版中，在白色中的内容区域是可见的，而黑色区域的内容是不可见的。
至于波纹，这里把它定义在pattern元素中，方便在填充元素的时候可以直接平铺。
<defs>
...
<pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
<path fill="#fff" d="..."/>
</pattern>
</defs>
<rect class="water-fill" fill="url(#water)" mask="url(#text-mask)" x="0" y="0" width="1600" height="120"/>
由于做的波浪形状很短，不足以填充整个图形，所以借助于SVG中的pattern。在矩形元素中，使用了定义好的pattern来填充整个矩形，而蒙版来负责呈现波浪形状，demo链接
动画
动画的实现主要有两种方法，CSS和JS。但是在目前的浏览器中总会碰到一些奇怪的问题；在有些浏览器中不支持改变SVG中的一些属性，比如x和y。大部分浏览器支持使用transform:translate(x,y)，但是在这篇文章中不适用，因为要同时移动元素本身和蒙版，而使用一些第三方封装好了的js库，就可以解决这些问题。
这里略过CSS这个方案，直接使用js方法来实现，CSS方案链接。
有很多js库供选择，比如Velocity.js,Transit。在这里我们使用GSAP/TweenMax。
GreenSock编写动画
如果对GreenSock不了解可以去看看以前的一篇GreenSock简明教程。
简单点说，就是使用GreenSock来操作相关的transform来实现动画效果，它还帮我们做了一些浏览器兼容方面的工作。
代码如下：
// 选择元素
var fill=document.querySelector(".water-fill");
// 波浪动画效果，主要是改变它的波浪动画
TweenMax.fromTo(fill,0.8,{
// Set the "from" position
attr:{
x:-400
}
},
{
// Set the "to" position
attr:{
x:0,
},
// Repeat infinitely
repeat:-1,
// Linear easing
ease:Linear.easeNone
});
// 往上填充的动画效果
TweenMax.fromTo(fill,10,{
// From
attr:{
y:120,
height:0
},
},{
// To
attr:{
y:-20,
height:140
},
repeat:-1,
// Reverse animation on loop
yoyo:true,
ease:Linear.easeNone
});
这里为来使体验更好一点，多使用一个文字图层，填充稍微暗一点的颜色，这样可以在动画开始之前文字也是可读的。
<use x="0" y="0" xlink:href="#text" fill="#222"/>
一个文字波浪动画效果就完成，非常的简单。
本文主要是从Create Text Filling with Water Effect这篇文章截取了一部分，有疏漏或者理解不到位的地方，还请多多指教！
