索引
为什么使用动画?一个令人信服的理由是动画可以明显提升用户体验,否则突兀的界面变化可能会让用户无所适从。
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
查看动画效果: