第四十二课：基于CSS的动画引擎
由于低版本浏览器不支持css3 animation，因此我们需要根据浏览器来选择不同的动画引擎。如果浏览器支持css3 animation，那么就使用此动画引擎，如果不支持，就使用javascript的动画引擎。
首先，我们看一下判定条件，方便切换。前面说过，浏览器把所有事件类型的构造器放在window上，只不过不可遍历。我们用Object.getOwnPropertyNames(window)，可以得到window对象中的所有属性，然后再filter一下，就能得到所有的事件构造器了。最后，我们通过判断如果存在window.AnimationEvent或window.WebKitAnimationEvent就可以使用我们基于css的动画引擎了。
Object.getOwnPropertyNames(object)方法返回object对象自己的属性的名称。 一个对象的自己的属性是指直接对该对象定义的属性，而不是从该对象的原型继承的属性。返回值是一个数组，其中包含object对象自己的属性的名称，而且object的可枚举的和不可枚举的属性和方法都返回。 若要仅返回可枚举的属性和方法的名称，可使用 Object.keys 函数 。
另一个方法也可以判断，通过判定有没有keyframe样式规则的构造器。它也是放在window上的，我们可以通过这样的等于来判断：var ok = window.MozCSSKeyframeRule || window.WebKitCSSKeyframeRule || window.CSSKeyframeRule;
用css实现动画引擎有以下几个好处：
（1）不用你计算原始值，它自行内部计算。
（2）颜色值不用你转换为RGB数组。
（3）如果想做动画倒带，直接设置animation-iteration-count为2，animation-direction为alternate就行了。
（4）像hide这个特效，需要我们在动画结束时，将进行动画的样式还原为初始值，在css3中，我们只需要animation-fill-mode设置为backwards就行了。
（5）对于动画的暂停和继续，其实就是控制animation-play-state的值。
css动画引擎在操作元素进行动画时，是通过添加类名或插入样式规则实现的，添加类名，我们可以通过el.classList.add()来操作。动态插入样式就有点难度了，我们需要了解相关的API。
在浏览器中，有两个元素能生产样式表，link和style。我们可以访问它们的sheet属性（样式表对象），此属性下面有一个cssRules属性（CSSRules类数组对象），它的值包含所有的样式规则。
在css中，样式规则至少有5种类型，这里我们只讲跟我们动画引擎有关的两种类型：CSSStyleRule和CSSKeyframesRule。
.move { animation:move 4s linear;} 这就是CSSStyleRule
@keyframes move { from{ margin-left:-20%;} to{margin-left:100%; } } CSSKeyframesRule
CSSStyleRule，我们可以通过它的selectorText取得指定的样式规则，比如这里的selectorText的值就是.move。
CSSKeyframesRule，我们可以通过它专有的name属性判定，比如这里的name就是move。
下面，我们来看下操作样式规则的方法：
var styleElement;
function insertCSSRule(rule){ //当插入样式规则
if(styleElement){ //如果之前已经插入过了，那么就进入if
var number = 0;
try{
var sheet = styleElement.sheet; //样式表对象
var cssRules = sheet.cssRules; //样式规则对象
number = cssRules.length; //有多少样式规则
sheet.insertRule(rule , number); //把rule插入到样式表对象中，位置在number处。
}catch(e){
$.log(e.message + rule); //抛出错误
}
}else{ //如果是第一次插入
styleElement = document.createElement("style"); //创建一个新的style
styleElement.innerHTML = rule; //把样式规则放入这个style标签中
document.head.appendChild(styleElement); //把这个style插入到页面中
}
}
function deleteCSSRule(ruleName , keyframes){ //第一个参数代表要删除的样式的名字，第二个参数代表要删除的样式是否是CSSKeyframesRule规则的，是就是true
var prop = keyframes ? "name" : "selectorText"; //这里我们假设删除的是keyframes的样式，比如：deleteCSSRule("move",true)
var name = keyframes ? "@keyframes" : "cssRule";
if(styleElement){ //当样式存在时，才能删除
var sheet = styleElement.sheet;
var cssRules = sheet.cssRules;
for(var i=0,n=cssRules.length;i<n;i++){ //遍历样式规则
var rule = cssRules[i];
if(rule[prop] ===ruleName){ //这里的prop="name"，ruleName="move"，因此如果sytle存在@keyframes move样式定义，rule[prop]==="move"
sheet.deleteRule(i); //删除样式表对象中的此样式规则。
break;
}
}
}
}
接着，就是三个重要的内容函数：
startAnimation，nextAnimation与stopAnimation。
startAnimation方法，用于立即执行此元素的动画，具体做法是先把传进来的参数构建成两个样式规则，第一个样式规则就是普通的CSSStyleRule，它的selectorText是一个类名，比如上面的.move，第二个样式规则是CSSKeyframesRule，它的name就是@keyframes后面的值，比如上面的move。然后，把这两个样式规则添加到页面上去。然后绑定animationend事件，最后，给要运动的元素el添加此类名，el.classList.add(className)，比如上面的move。这时，el元素就会根据这两个样式规则进行动画操作，等这个动画操作结束后，就会触发animationend事件回调函数。在这个事件回调函数中，会先把元素动画的最终状态的样式全部赋给el元素的style属性中，然后移除el元素的此类名，el.classList.remove(className)，这里如果不先保存动画最终状态的样式给元素el.style，当移除el元素的此类名className时，元素el会恢复到最初的状态，而不会保存动画最终状态的样式。然后移除第二个样式规则，也就是@keyframes定义的样式。最后，检查是否有其他动画元素在排队，如果有，就调用nextAnimation方法
nextAnimation()，会先判断当前是否有动画在执行，如果没有就从队列中找出一个动画对象进行动画操作（调用startAnimation），如果有，就不做任何处理。当然在队列中，如果此动画对象有延迟操作，就用setTimeout来延迟操作动画的执行。
stopAnimation用于停止动画的操作，它传入一个类名，也就是上面的move，如果当前只有一个元素引用了这个类名，那么就会在页面中删除此类名定义的样式，这里就是.move{}中的所有内容，以及keyframe定义的样式，这里就是@keyframes move{}定义的样式。如果有两个或者多个元素引用了这个类名，那么，只会把这个count减一，然后不做任何操作，直到count=0时，也就是没有元素引用这个类名时，才会删除上面的两个样式。
基于css的动画引擎就是这么简洁。但是它也有缺点，比如：它对scrollTop，scrollLeft的动画就无能为力了。此外，我们也无法对canvas元素里面的矢量图形进行动画操作。
最后，CSS3还支持transform2D和transform3D，javascript通过WebGL来实现3D效果，这些都需要用到矩阵方法进行复杂的运算，希望某一天，我加入的公司能够研究这一块。
加油！
