第四十二课:基于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效果,这些都需要用到矩阵方法进行复杂的运算,希望某一天,我加入的公司能够研究这一块。

加油!

上一篇:css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。


下一篇:Effeckt.css项目:CSS交互动画应用集锦