索引

• 概述
• 示例

概述

为什么使用动画？一个令人信服的理由是动画可以明显提升用户体验，否则突兀的界面变化可能会让用户无所适从。

css动画有两种实现方式：transition和animation，无论哪种方式，如何用js来驱动都是一件很痛苦的事，比如要把一个id为mydiv的div元素的背景颜色动画地改变为红色，需要以下代码：

var mydiv = document.getElementById('mydiv');
mydiv.style.setProperty('background', 'red');
mydiv.style.setProperty('transition', 'background 0.5s');
mydiv.style.setProperty('-webkit-transition', 'background 0.5s');
var handleTransitionEnd = function(e) {
    console.log(e);//动画结束后的自定义逻辑

    mydiv.style.setProperty('transition', '');//动画完成之后的清理工作
    mydiv.style.setProperty('-webkit-transition', '');
    mydiv.removeEventListener('transitionend', handleTransitionEnd);
    mydiv.removeEventListener('webkitTransitionEnd', handleTransitionEnd);
}
mydiv.addEventListener('transitionend', handleTransitionEnd);
mydiv.addEventListener('webkitTransitionEnd', handleTransitionEnd);

可以看到，如果用js设置style，我们不但要处理动画本身，还要考虑浏览器兼容性，动画完成之后还要做一些清理工作，简单的改变背景色居然这么多代码！ 接下来我们换种解决方案，使用此插件完成这项工作：

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });

这样就清晰多了，animate函数的参数可以是css选择器，也可以是dom对象，之后就可以链状操作多个样式：

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .set('opacity', '0'),
            .scale(2, 2)
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });

在这个动画过程中同时改变了background、opacity、transform: scale三个样式，如果采取最原始的方式，代码量和可读性根本无法控制！

此插件还支持动画队列：

ht.Default.animate('#mydiv')
            .set('background', 'red')
            .set('opacity', '0'),
            .scale(2, 2)
            .then()
                .set('left', '200px')
                .set('top', '200px')
            .pop()
            .end(function(e) {
                console.log(e);//动画结束后的自定义逻辑
            });

上面的代码中定义了两个动画，第一个是background、opacity、transform:scale样式的动画过程， 这个动画完成之后再启动第二个动画，改变left和top样式

API说明： 此插件在ht.Default上增加了一个animation函数，参数可以是css选择器，也可以是dom对象，返回Animate对象实例(无需通过new关键字创建)，我们上面看到的set、scale、then、end等函数都是此类的公共API，完整的API列表如下：

• set(prop, propValue) 设置css样式，prop为样式名，如width、opacity等，propValue为样式值，如'200px'， '0'等
• then() 在动画队列中加入一个新的动画过程
• pop() 返回当前动画过程的上一个动画过程，一般情况下由队列中第一个动画过程调用end()，所以通常调用几个then()就应该调用几个pop()
• end(callbackFunc) 启动当前的动画过程，可传入一个函数在动画队列完成后被回调
• translate(x, y) 转换为transform: translate(x, y)，参数可以为数字(当作'px'处理)，也可以为字符串度量值('10px', '20em'等)
• translateX(n) 转换为transform: translateX(n) 参数可以为数字或字符串度量值
• tx(n) 同translateX(n)
• translateY(n) 转换为transform: translateY(n) 参数可以为数字或字符串度量值
• ty(n) 同translateY(n)
• scale(x, y) 转换为transform: scale(x, y)
• scaleX(n) 转换为transform: scaleX(n)
• scaleY(n) 转换为transform: scaleY(n)
• rotate(n) 转换为transform: rotate(n)
• skew(x, y) 转换为transform: skew(x, y)
• skewX(n) 转换为transform: skewX(n)
• skewY(n) 转换为transform: skewY(n)
• duration(n) 设置动画持续时间
• delay(n) 设置动画延时启动时间

• ease(n) 设置缓动方式，除了css内置的缓动方式，HT额外扩展了很多缓动方式，列表如下：

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-quad
  • ease-in-cubic
  • ease-in-quart
  • ease-in-quint
  • ease-in-sine
  • ease-in-expo
  • ease-in-circ
  • ease-in-back
  • ease-out-quad
  • ease-out-cubic
  • ease-out-quart
  • ease-out-quint
  • ease-out-sine
  • ease-out-expo
  • ease-out-circ
  • ease-out-back
  • ease-in-out-quad
  • ease-in-out-cubic
  • ease-in-out-quart
  • ease-in-out-quint
  • ease-in-out-sine
  • ease-in-out-expo
  • ease-in-out-circ

  • ease-in-out-back

    这些缓动方式的区别可以参考这里：缓动曲线

使用此插件之前，需要引入ht-cssanimation.js文件：

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-cssanimation.js"></script>

示例

点击下面的例子中的div查看动画效果: