css3中创建动画的三种方式详解

一、介绍

创建动画有多种方式，除了传统的利用setInterval来不断改变元素的属性值，和最新canvas中requestAnimationFrame以外，此处介绍三种创建动画的方式。总的来说，这三种都可以归为css3的动画方式，但是，不同的方式伸展拳脚的地方也就不一样。（注意，此处三种方式均基于JQuery）

二、创建动画的三种方式

1、css() + transform

这是最简单的一种方式，利用$(id).css()方法添加一个transform属性即可（同理可添加animation属性）。

$div.css({  "transition-timing-function" : "linear",  "transition-duration" : "3000ms",  "transform" : "translateX(300px)"});

2、addClass() + animation

这是利用了JQuery的addClass()方法，及css3的animation动画属性。

此处必须先定义好一个animation，然后再定义一个有该animation的class类，在addClass()方法中将该class类添加到元素中。代码如下：

定义animation和class

.ani_class {  animation: div3_ani 3s linear forwards;}@keyframes div3_ani {  0% {    transform: none;  }  100% {    transform: translate(300px, 0);  }}

添加到元素中

$div2.addClass("ani_class");

3、JQuery transit插件

这是jQuery引入的一种新的方式，需要引入jquery.transit.js，详细教程请自行查资料。这里只是简单介绍：

$div3.transition({  transform : "translateX(300px)"},3000,"linear");

三、三种方式的结束事件捕捉

在这里，除了第一种css + transform无法捕捉到结束事件以外（也可能我未发现），其他两种都能捕捉到，代码如下：

1、addClass() + animation

//可捕捉结束事件$div2.addClass("ani_class").on(animationEnd(),function(){  alert("addClass() + transform animation end");});

此处的animationEnd()根据不同浏览器返回animationend事件的字符串，代码如下：

function animationEnd(){  var explorer = navigator.userAgent;  if( ~explorer.indexOf("WebKit") ){    return 'webkitAnimationEnd';  }  return 'animationend';}

2、JQuery transit

//可捕捉结束事件$div3.transition({    transform : "translateX(300px)"},3000,"linear", function(){    alert("transition end");});

四、利用结束事件进行动画链式嵌套编程

有些时候我们需要让动画按顺序播放，同时又能在各个关键点有效控制它，那么就要进行动画的链式编程。由于我们可以捕捉到动画的结束事件，那么直接在结束事件加入下一步动画即可。代码如下：

1、addClass() + animation

$div1.addClass("ani_class").on("webkitAnimationEnd",function(){    $div2.addClass("ani_class").on("webkitAnimationEnd",function(){        $div3.addClass("ani_class").on("webkitAnimationEnd",function(){            alert("addClass animation end!");        });    });});

2、JQuery transit

$div1.transition({    transform : "translateX(300px)"},3000,"linear", function(){    $div2.transition({        transform : "translateX(300px)"    },3000,"linear", function(){        $div3.transition({            transform : "translateX(300px)"        },3000,"linear", function(){            alert("transition end");        });    });});

五、非嵌套式链式动画

相信你也看出来了，嵌套式链式动画对开发人员来说很不友好，稍微一个小小的动画就有可能嵌套上百行，对于维护和修改极为不利。

所以此处我们引入JQuery的Deferred对象。Deferred对象最早是为AJAX异步加载所建立的，用于AJAX请求的回调，让开发人员从多个AJAX请求的回调嵌套方法中解脱出来。

而在这里，我们也可以将其引入到动画中，以增强动画的链式编程效果，简化开发。

（有关Deferred对象的详细资料请自行学习，由于脱离本文主题，不在此做详细介绍）

此处我们先定义两个方法，这两个方法的原理分别用到了前面所说的addClass()和JQuery transit，但是它们都有一个共同点，在事件结束时都修改了defer属性，并将其返回。

//addClass + animationfunction addClassAni(element){    var defer = $.Deferred();    element.addClass("ani_class").on(animationEnd(),function(){        defer.resolve();    });    return defer;}//JQuery transitfunction addTransitAni(element){    var defer = $.Deferred();    element.transition({        transform : "translateX(300px)"    },3000,"linear", function(){        defer.resolve();    });    return defer;}

然后就可以愉快的利用Deferred进行链式编程啦！

addClassAni($div1).then(function(){    return addClassAni($div2);}).then(function(){    return addTransitAni($div3);}).then(function(){    return addTransitAni($div4);}).then(function(){    alert("animation end!");});

此处每一步都会返回一个Deferred对象，下一步操作做什么要视该Deferred对象的状态。

同时，如果某些动画并非要等上一个动画执行完才执行，那么只需让上一步动画不返回Deferred对象即可。如下：

addClassAni($div1).then(function(){    return addClassAni($div2);}).then(function(){    addTransitAni($div3);}).then(function(){    return addTransitAni($div4);}).then(function(){    alert("animation end!");});

此处的$div3会与$div4会等$div2动画完成后共同移动。