JS实现动画原理一（闭包方式）

前提：

你必须了解js的闭包（否则你看不懂滴）

我们就来做一个js实现jq animate的动画效果来简单探索一下，js动画实现的简单原理；

html代码 <div id="man" style="background:gray; height:1px; width:100%;"> </div>

原理：就是让它的高度逐渐从 1px ----100px

jq 代码实现：$("#id").animate({height:"100px"})

JS (too yong too simple) 代码实现方式：

function addHeight(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){
var len=i*10;
obj.style.height=len+"px";
}
}

//为什么too young too simple 我不解释；

JS(sometimes naive)代码实现方式：

function addHeight2(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){
setTimeout(function(){
var len=i*10;
obj.style.height=len+"px";
},i*1000)
}
}

//为什么说 sometimes naive 呢？ 因为你的 i 直接就等10 了 不信你 alert 一下，就是10；

//这里还需要插播一点关于setTimeout 的使用方法；

setTimeout 的使用方法

var g=100;
function Test(val){
alert(val);
}
setTimeout(Test,3000); //三秒手执行
setTimeout(Test(),3000); //马上执行
setTimeout(Test(g),3000); //马上执行

//那么，我们如何传递参数呢；
//方式一（如果是静态参数的话）
setTimeout(function (){
Test("静态参数");
},3000)

//方式二（如果是动态参数）
setTimeout(function (g){
Test(g);
}(g),3000)

//方式三（通用） 这里的参数只能是字符串；
setTimeout("Test("+g+")");

分析，问什么，i会变成10 呢？

答案如下：

function addHeight3(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){
setTimeout(function(){
alert(i)                                  //什么变量i是10 呢
//你可以借助异步的概念来理解；
//第一次循环 i=1
//seTimeout 中的 delay=1000
//在着1000内 循环，早已结束，结果i=10
//现在的问题就是  将 i 传递进去呢；
},i*1000)
}
}

改进

function addHeight4(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){
setTimeout(function(para){
//这样写的话 是可以将参数传递进去，不过函数会立即执行；没有时间间隔！

alert(para);                  //1 2 3 4 5 6 7 8 9 10
}(i),i*5000)                  //也就是说，这里的delay 时间设置无效果；
}
}

最总完整代码：（并不推荐这种方式来实现动画）

function addHeight(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){

setTimeout((function(para){   // 第一个函数（也就是function(para)）执行后 ,返回 返回函数引用（函数体）
return function (){            //立即执行之后 返回一个匿名函数；

var len=para*10;            //这个参数可以理解成 动画元素中帧的概念！
obj.style.height=len+"px";
}
})(i),i*20) //如果想让效果平滑一点，那么 就将时间参数设置小一点呀；
}
}

//这样就实现jq animate的效果的；

实现不停地变化，我们用setInterval来实现（就是，在最外层嵌套一个seInterval函数；）

扩展

我们可以使用opacity 来达到渐变的效果的呀；

代码如下：

function addHeight(){
var obj=document.getElementById("man");
for(var i=1;i<10;i++){

setTimeout((function(para){
return function (){
obj.style.opacity=para;
}
})(i/10),i*1000)
}
}

总结：

其实这种实现方式并不是最佳的，最佳实现方式

情看我的JS-实现动画原理二（非闭包方式）