使用CSS3实现分层动画

  1 /*!
  2  * animation.js by A-K
  3  * Date: 2014-3-5
  4  */
  5 
  6 Animation = function () {
  7     if (arguments.length <= 1) {
  8         return;
  9     };
 10     this.setVars.apply(this, arguments);
 11     this.update();
 12 }
 13 
 14 Animation.prototype = {
 15     //animation属性默认值
 16     DEFAULT_STYLE_VARS: {
 17         duration: 0,
 18         timingFunction: "ease",
 19         delay: 0,
 20         iterationCount: 1,
 21         direction: "normal",
 22         playState: "running",
 23         fillMode: "forwards"//“animation-fill-mode”默认值为“none”,修改默认为”forwards“即当动画完成后，保持最后一个属性值。
 24     },
 25 
 26     id: "",//动画元素id值
 27     el: null,//动画元素
 28     keyframesVars: {},
 29     animationName: "",
 30     styleVars: {},
 31 
 32     setVars: function (id, duration, keyframesVars, styleVars) {
 33         this.id = id;
 34         this.animationName = "animation_" + id.substr(1);
 35         this.el = document.querySelector(id);
 36         this.duration = duration;
 37         this.keyframesVars = keyframesVars;
 38         styleVars = styleVars || {};
 39         styleVars.duration = duration;
 40         styleVars.name = this.animationName; //animation-name属性
 41         //将默认对象和传入对象合并
 42         this.styleVars = Object.extend(this.DEFAULT_STYLE_VARS, styleVars, true);
 43     },
 44 
 45     /**
 46      * 更新动画
 47      */
 48     update: function () {
 49         this.creatKeyframes();
 50         this.setAnimation();
 51     },
 52 
 53     /**
 54      * 添加动画
 55      */
 56     add: function () {
 57         this.styleVars = {};
 58         this.keyframesVars = {};
 59         this.setVars.apply(this, arguments);
 60         this.update();
 61     },
 62 
 63     //创建动画帧
 64     creatKeyframes: function () {
 65         var token, style, sheet, rule, keyframe;
 66         //创建style对象，并获取关联的sheet对象
 67         style = document.createElement("style");
 68         document.head.appendChild(style);
 69         sheet = style.sheet;
 70         //创建一个名为keyframe的keyframe（webkit需要前缀）
 71         var token = window.webkitRequestAnimationFrame ? "-webkit-" : "";
 72         sheet.insertRule("@" + token + "keyframes "+ this.animationName +" {}", 0);
 73         keyframe = sheet.cssRules[0];
 74         //keyframe为0%时
 75         (keyframe.insertRule || keyframe.appendRule).call(keyframe,"0% {}");
 76         //获取元素默认样式并复制为初始帧样式
 77         this._cloneStyleValue(keyframe.cssRules[0], this.keyframesVars);
 78         //keyframe为100%时
 79         (keyframe.insertRule || keyframe.appendRule).call(keyframe, "100% {}");
 80         //设置帧样式
 81         this.setStyle(keyframe.cssRules[1], this.keyframesVars);
 82     },
 83 
 84     setAnimation: function () {
 85         var sv = this.styleVars;
 86         var el = this.el;
 87         el.style[objName] = objValue;
 88         for (var i in sv) {
 89             var objName = i;
 90             var objValue = sv[i];
 91             objName = "animation" + objName.replace(objName.charAt(0), objName.charAt(0).toUpperCase());
 92             el.style[objName] = objValue;
 93             this._addPrefixStyle(el, objName, objValue);
 94             //console.log(objName, objValue);
 95         }
 96     },
 97 
 98     /**
 99      * [设置样式]
100      * @param {[object]} obj     [要设置样式的对象]
101      * @param {[object]} attrObj [样式对象]
102      */
103     setStyle: function (obj, attrObj) {
104         for (var i in attrObj) {
105             var objName = i;
106             var objValue = attrObj[i];
107             //if (objName.indexOf("-") > 0) {
108             //    var num = objName.indexOf("-");
109             //    objName = objName.replace(objName.substr(num, 2), objName.substr(num + 1, 1).toUpperCase());
110             //}
111             obj.style[objName] = objValue;
112             this._addPrefixStyle(obj, objName, objValue);
113         }
114     },
115 
116     //添加兼容前缀
117     _addPrefixStyle: function (target, name, value) {
118         name = name.replace(name.charAt(0), name.charAt(0).toUpperCase());
119         target.style["webkit" + name] = value;
120         target.style["moz" + name] = value;
121         target.style["o" + name] = value;
122         target.style["ms" + name] = value;
123     },
124 
125     //复制样式值
126     _cloneStyleValue: function (target, attrObj) {
127         var elStyle = Object.getStyle(this.el);
128         for (var i in attrObj) {
129             var objName = i;
130             var objValue = elStyle[i];
131             target.style[objName] = objValue;
132         }
133     }
134 }
135 
136 /**
137  * [获取元素样式对象]
138  * @param  {[Object]} target [要获取样式的对象]
139  * @return {[Object]}        [样式对象。]
140  */
141 Object.getStyle = function (target) {
142     if (target.currentStyle) //判断是否是IE浏览器
143         return target.currentStyle;
144     else if (window.getComputedStyle)//如果不是IE，使用getComputedStyle获得样式对象
145         return window.getComputedStyle(target, null);
146 }
147 
148 /**
149  * [合并对象值]
150 * @param {Object} target 目标对象。 
151 * @param {Object} source 源对象。 
152 * @param {boolean} deep 是否复制(继承)对象中的对象。 
153 * @returns {Object} 返回继承了source对象属性的新对象。 
154  */
155 Object.extend = function (target, source, deep) {
156     target = target || {};
157     var sType = typeof source, i = 1, options;
158     if (sType === ‘undefined‘ || sType === ‘boolean‘) {
159         deep = sType === ‘boolean‘ ? source : false;
160         source = target;
161         target = this;
162     }
163     if (typeof source !== ‘object‘ && Object.prototype.toString.call(source) !== ‘[object Function]‘)
164         source = {};
165     while (i <= 2) {
166         options = i === 1 ? target : source;
167         if (options != null) {
168             for (var name in options) {
169                 var src = target[name], copy = options[name];
170                 if (target === copy)
171                     continue;
172                 if (deep && copy && typeof copy === ‘object‘ && !copy.nodeType)
173                     target[name] = this.extend(src ||
174                     (copy.length != null ? [] : {}), copy, deep);
175                 else if (copy !== undefined)
176                     target[name] = copy;
177             }
178         }
179         i++;
180     }
181     return target;
182 };

 1 <body>
 2     <div id="scene0" class="scene">
 3         <div id="container0" class="container">
 4             <span class="car"></span>
 5             <span class="car"></span>
 6             <span class="car"></span>
 7             <span class="car"></span>
 8         </div>
 9         <div id="container1" class="container">
10             <span class="car"></span>
11             <span class="car"></span>
12             <span class="car"></span>
13             <span class="car"></span>
14         </div>
15     </div>
16     <div id="scene1"  class="scene">
17         <span id="bg0" class="bg"></span>
18         <span id="cloud0" class="cloud"></span>
19         <span id="cloud1" class="cloud"></span>
20         <span id="cloud2" class="cloud"></span>
21         <span id="cloud3" class="cloud"></span>
22         <span id="logo" class="sprite"></span>
23         <span id="title0" class="sprite"></span>
24         <span id="title1" class="sprite"></span>
25     </div>
26 </body>

 1 window.onload = function () {
 2     var an = new Animation();
 3     an.add("#scene0", "0.5s", { opacity: 0 }, { delay: "0s" });
 4     an.add("#logo", "0.5s", { opacity: 1 }, { delay: "0s" });
 5     an.add("#title0", "0.5s", { opacity: 1, top: "147px" }, { delay: "0.5s" });
 6     an.add("#title1", "0.6s", { opacity: 1, top: "249px" }, { delay: "0.8s" });
 7     an.add("#cloud0", "10s", { left: "-1024px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
 8     an.add("#cloud1", "10s", { left: "0px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
 9     an.add("#cloud2", "10s", { left: "-1024px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
10     an.add("#cloud3", "10s", { left: "0px" }, { timingFunction: "linear", iterationCount: "infinite", delay: "0s" });
11 }