HT CSS动画手册

索引


概述

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

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

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);//动画结束后的自定义逻辑
            });

在这个动画过程中同时改变了backgroundopacitytransform: 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);//动画结束后的自定义逻辑
            });

上面的代码中定义了两个动画,第一个是backgroundopacitytransform:scale样式的动画过程, 这个动画完成之后再启动第二个动画,改变lefttop样式

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

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

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

示例

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


欢迎交流 service@hightopo.com