文本动画效果小结

重所周知，在处理页面的时候，动画会给静态页面带了一些生机，我们也会在制作页面的时候考虑增加一些动画效果，来增强页面的用户体验。但是需要注意的是，不是所有的动画都能增强用户体验，也需要慎重使用动画。时刻牢记一条准则：【要么实用，要么优雅，要么死路一条！】

我在之前也对velocity.js这个动画库做过简单的介绍（制作炫酷的专题页面、velocity序列动画、velocity自定义动画），今天主要了解一下文本相关的动画效果。

jquery文本动画淡入效果插件reveal-it.js
首先下载必要的JS和CSS资源；其次该插件接受四个参数：
- id：影响生成的dom，class为reveal__inner-id，可以自己写样式或者JS选择独立处理
- auto：是否自动播放，默认是true
- delay：单位毫秒，延迟时间
- background：背景色
- trigger：出发条件，一般为空或者是on-visible
该插件提供了两个方法，一个是初始化方法：$.fn.initReveal(options)，另外一个是执行方法，当设置auto为false时，可以自定义触发方式，如：点击、鼠标进入等事件。
更加强大的文本动画blast.js+velocity.js
首先隆重推出的是blast.js，它是专门分割文本元素的js，提供了多重分个方式和一些其他参数，方便对文本进行相关css样式设置或者动画相关。
我们先看一下简单的使用方式：

//使用前
<div>
    Hello World
</div>
//使用JS
$("div").blast({ 
    delimiter: "character" //设置分割符：charactor（字符）、word（单词）、sentence（句子）
    search: false // 以search的值进行分割
    tag: "span" // 设置包裹元素标签类型
    customClass: "" // 添加自定义的样式类
    generateIndexID: false // 添加自定义ID序号：#customClass-i
    generateValueClass: false // 添加.blast-分隔符类型-值的类名
    stripHTMLTags: false // 分割之前Strip HTML
});
//使用后
<div class="blast-root">
    <span class="blast">Hello</span>
    <span class="blast">World</span>
</div>
//可以恢复合成后的dom
$('div').blast(false);

上述的方式，可以将一个完整的文本分割成你想要的效果。然后就可以结合velocity.js设置动画了。

$("div").blast({ 
    delimiter: "character"
}).velocity("transition.fadeIn", {
    duration: 1250,
    stagger: 40, //数组中每个元素的时间间隔
    delay: 400
  })

$.Velocity.hook = true;可以快速关闭动画，方便debug或者测试使用，也方便在特定环境下禁用动画。

以此为例，可以给单个元素执行各种你需要的动画，包括入场和出场。剩下就需要你独一无二的创造力了~

参考资料：

文本动画效果小结

推荐阅读