今天无事点开了N年未点开的慕课网,看了一个js动画框架的视频,心血来潮用jQuery的方法封装了一下,虽然不如jQuery,但是还是有点点所获。
什么都不说,直接上代码:
/** * 这是框架的唯一对象,使用jQuery框架的创建方法 * @class MyAnimation * @constructor */ function MyAnimation(Selector){ //返回MyAnimation原型链中init()方法创建的对象 return new MyAnimation.prototype.init(Selector); } /** * 这是对象的初始化方法 * @method init * @param {string} Selector 选择对象 * @return */ function init(Selector){ var el = null; var identifier = "(?:\\\\.|[\\w-]|[^\0-\\xa0])+"; var match = { "all": new RegExp( "^\\.(" + identifier + ")" ) }; //匹配 if(match["all"].exec(Selector) != null){ el = document.querySelectorAll(Selector); }else{ el = document.querySelector(Selector); } /** * 实现css样式的改变 * @method changeStyle * @for MyAnimation * @param {Object} obj 元素对象(带timer) * @param {json} json json对象格式 --> {attr(String):String}(同时变化的属性和值) * @param {function} callback 回调函数,用于链式动画 * @return {void} */
//jQuery --> animate this.changeStyle = function(obj, json, callback){ clearInterval(obj.timer); var _this = this; //保存init() //一个定时器监视所有属性变化 obj.timer = setInterval(function(){ var flag = true; //判断是否所以的运动都完成了 for(var attr in json){ //初始值 var icur = 0; //判断属性,分别处理 if(attr == "opacity"){ //0.07 * 100 --> 7.000000001 --> round --> 7 icur = Math.round(parseFloat(_this.getStyle(obj, attr)) * 100); }else{ //console.log(_this); icur = parseInt(_this.getStyle(obj, attr)); } //计算速度 var speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); /* 以下代码是不对的,因为当有一个运动到达目标,就关闭了定时器 if(icur == json[target]){ clearInterval(timer); } */ //有运动未完成就会设置为false if(icur != json[attr]){ flag = false; } if(icur == "opacity"){ obj.style.filter = ‘alpha(opacity:‘+ icur + speed +‘)‘; obj.style.opacity = (icur + speed) / 100; }else{ obj.style[attr] = icur + speed + ‘px‘; } } //已经遍历了attr,判断是否所有运动都完成了 if(flag){ clearInterval(obj.timer); //回调 if(callback){ console.log(_this); callback(_this); } } }, 30); } /** * 获取style属性值 * @method getStyle * @for MyAnimation * @param {Object} obj 元素对象 * @param {String} attr 元素对象属性值 */ this.getStyle = function(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } } MyAnimation.prototype.init = init; //使init()创建的对象指向MyAnimation MyAnimation.prototype.init.prototype = MyAnimation.prototype; //创建一个名为MA的MyAnimation外部对象引用 var MA = window.MyAnimation;