今天无事点开了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;