运动函数animate
animate函数是动画封装函数
参数：
elem参数是运动的对象
targetJSON参数是运动的终点状态
time参数是运动总时间，单位为毫秒
tweenString缓冲描述词，例如“linear”，可选
callback是回调函数，可选
function animate(elem , targetJSON , time , tweenString , callback){
//函数重载，用户传进来的参数数量、类型可能不一样
//检查数量和类型
if(arguments.length < 3 || typeof arguments[0] != "object" || typeof arguments[1] != "object" || typeof arguments[2] != "number"){
throw new Error("对不起，你传进来的参数数量不对或者参数类型不对，请仔细检查哦！");
return;
}else if(arguments.length == 3){
//用户只传进来3个参数，表示tweenString、callback被省略了，那么我们默认使用Linear当做缓冲词
tweenString = "Linear";
//默认回调函数是null
callback = null;
}else if(arguments.length == 4){
//用户只传进来4个参数，第4个参数可能传进来的是tweenString，也可能是callback
switch(typeof arguments[3]){
case "string" :
//用户传进来的是缓冲描述词儿，所以就把callback补为null
callback = null;
break;
case "function" :
callback = arguments[3];
tweenString = "Linear";
break;
default :
throw new Error("抱歉，第4个参数要么是缓冲描述词，要么是回调函数，请检查！");
}
}
//动画间隔要根据不同浏览器来设置：
if(window.navigator.userAgent.indexOf("MSIE") != -1){
var interval = 50;
}else{
var interval = 20;
}
//强行给我们的动画元素增加一个isanimated的属性，是否正在运动
elem.isanimated = true;
//初始状态，放在origninalJSON里面
var originalJSON = {};
//变化的多少，放在deltaJSON里面
var deltaJSON = {};
//给信号量对象添加属性，添加什么属性，目标对象中有什么属性，这里就添加什么属性
//值就是当前的计算样式
for(var k in targetJSON){
//初试JSON
originalJSON[k] = parseFloat(fetchComputedStyle(elem , k));
//把每个targetJSON中的值都去掉px
targetJSON[k] = parseFloat(targetJSON[k]);
//变化量JSON
deltaJSON[k] = targetJSON[k] - originalJSON[k];
}
// 至此我们得到了三个JSON：
// originalJSON 初始状态集合，这个JSON永远不变
// targetJSON 目标状态集合，这个JSON永远不变
// deltaJSON 差值集合，这个JSON永远不变
// console.log(originalJSON);
// console.log(targetJSON);
// console.log(deltaJSON);
//总执行函数次数：
var maxFrameNumber = time / interval;
//当前帧编号
var frameNumber = 0;
//这是一个临时变量一会儿用
var n;
//定时器
var timer = setInterval(function(){
//要让所有的属性发生变化
for(var k in originalJSON){
//动：
// n就表示这一帧应该在的位置：
n = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
//根据是不是opacity来设置单位
if(k != "opacity"){
elem.style[k] = n + "px";
}else{
elem.style[k] = n;
elem.style.filter = "alpha(opacity=" + n * 100 + ")";
}
}
//计数器
frameNumber++;
if(frameNumber == maxFrameNumber){
//次数够了，所以停表。
//这里抖一个小机灵，我们强行让elem跑到targetJSON那个位置
for(var k in targetJSON){
if(k != "opacity"){
elem.style[k] = targetJSON[k] + "px";
}else{
elem.style[k] = targetJSON[k];
elem.style.filter = "alpha(opacity=" + (targetJSON[k] * 100) + ")";
}
}
//停表
clearInterval(timer);
//拿掉是否在动属性，设为false
elem.isanimated = false;
//调用回调函数，并且让回调函数中的this表示运动的对象
//我们加上了判断，如果callback存在，再执行函数
callback && callback.apply(elem);
}
},interval);
//之前的轮子，计算后样式
function fetchComputedStyle(obj , property){
//能力检测
if(window.getComputedStyle){
//现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
//强制把用户输入的词儿里面的大写字母，变为小写字母加-
//paddingLeft → padding-left
property = property.replace(/([A-Z])/g , function(match,$1){
return "-" + $1.toLowerCase();
});
return window.getComputedStyle(obj)[property];
}else{
//IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
//padding-left → paddingLeft
property = property.replace(/\-([a-z])/g , function(match,$1){
return $1.toUpperCase();
});
return obj.currentStyle[property];
}
}
