文本动画效果小结

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

我在之前也对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或者测试使用，也方便在特定环境下禁用动画。

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

参考资料：

• http://www.julian.com/research/blast/
• http://julian.com/research/velocity/
• https://github.com/erspark2002/reveal-it.js