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 + animation
function addClassAni(element){
    var defer = $.Deferred();
    element.addClass("ani_class").on(animationEnd(),function(){
        defer.resolve();
    });
    return defer;
}
//JQuery transit
function 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动画完成后共同移动。