南大软院大神养成计划——第十四天

今天是南大软院大神养成计划实施的第十四天，离结束越来越近了，我也要加紧学习了。今天学习的主要内容是jS动画剩下的部分——链式运动和同时运动和一些动画案例。

链式运动：

什么是链式运动呢？链式运动就是结束一个运动的时候，去直接做另一个运动 ，你可以无限延伸下去，比如改变了div的长度后，我们又接着改变高度，然后又改变透明度，这就是链式运动。

实现原理：

就是在startMove(obj,attr,iTarget)再加一个fn参数使其变为startMove（），并在清除动画之后，加入fn方法：if(fn){fn();}
在主页中，在三个参数之后再加入一个参数
startMove(Li,'width',400,function(){
startMove(Li,'height',200,function(){ startMove(Li,'opacity',100);
})
})

startMove就是一个运动框架，前一天的博客已经写到这部分内容，根据相应的参数持续相应的改变属性的运动，这个startMove的运动是缓冲运动。

fn相当于回调函数。

链式运动在改变属性后，肯定要复原原来的属性，复原的顺序跟改变的顺序是相反的，如我们先改变了宽度，然后高度，那么复原的顺序就是先复原高度然后再复原宽度。

实现代码：

function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);//1.2+++
obj.timer=setInterval(function(){//1.2+++
var icur=null;
//1.判断类型
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(iTarget-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}

}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

链式运动调用方法：

window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.timer = null;
oDiv.onmouseover = function(){
startMove(oDiv,'width',400,function(){//先改变宽度
startMove(oDiv,'height',400,function(){//然后改变高度
startMove(oDiv,'opacity',100);//然后改变透明度
});
});
};
oDiv.onmouseout = function(){
startMove(oDiv,'height',200,function(){//先还原透明度
startMove(oDiv,'opacity',30,function(){//然后还原高度
startMove(oDiv,'width',200)//最后还原宽度
})
});
};
};

})

同时运动：

同时运动就是同时做两种运动，而不是一个运动做完后接着另一个运动，比如我们同时改变宽度和高度。在实现同时运动的时候，我们需要粗略的了解json。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，我们称之为JavaScript对象表示法。

json格式：

var json={a:12,b:13};//可以放入多对值，每对值之间用“，”隔开，‘a’代表值得名称，12是值。
for(var i in json){//用for-in循环访问json里的值
alert(i); //弹出a
alert（json[i]); //弹出12

定义一个json｛｝通过for（var i in json）来遍历里面的值，使得属性可以同时变化。
注意：当json里的某个值到达目标时，就会停止定时器，此时需要对代码做出修改
json｛name/key｝

想具体了解json的同学，可以访问http://www.cnblogs.com/pigtail/archive/2012/06/08/2541314.html，这里详细讲解了json的内容。

所以根据以上json的知识，我们可以修改我们的框架来使其可以同时改变多个属性。

代码如下：

function startMove(obj,json,fn){
var flag=true;//标志所有运动是否到达目标值，
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var curr=0;
//判断是否为透明度
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
curr=parseInt(getStyle(obj,attr));
}
//移动速度处理
var speed=0;
speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr!=json[attr]){//如果没有达到目标值，怎么设定运动没有完成，flag=false
flag=false;
}
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}else{
obj.style[attr]=curr+speed+'px';
}
}//这个是定时器里的函数结尾
if(flag){//如果运动全部做完，则设置flag==ture
clearInterval(obj.timer);
if(fn){
fu();
}
}

有了这个框架，我们就可以实现大部分网上的动画效果，所以后面的动画效果都是基于这个框架实现的。

今天的学习就到这，期待明天的学习