前提：

     你必须了解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-实现动画原理二（非闭包方式）

---------------------------------------------------------------------更新：有了新的方法LET 产生局部变量滴啊；

下边附带各种草稿；

<!DOCTYPE HTML>

<html>

<script>

  //這種閉包的問題還出現在我們的數組中滴呀；

  function fn1(){

  var list = document.getElementById('list1');

  for(var i=1;i<=5;i++){

      var  item = document.createElement('li');

           item.appendChild(document.createTextNode('item ' +i))

           console.log(i);

           item.onclick=function (ev){

            console.log('item' +i+ 'is clicked')

          }

          list.appendChild(item)

      };

   }

  function fn2(){

    var obj=document.getElementById("list1");

    //同樣的問題還出現在我們數組中滴；

    for(var i=0;i<=5;i++){

       setTimeout(function (){

          var len=i*10;

          obj.style.height=len+"px";

          //這裡會執行五次, 這個for循環相當於生成了五個timeout對象；

          //每次都講長度設置為50

          console.log('--');

       },i*1000)

    }

  }

  function fn3(){

    //只要在我們不用的作用域中就會出現問題；

    var index=1;

    (function (){

      console.log('立即執行')

     console.log(index); //index

     })();

    setTimeout(function (){

      console.log('100s');

      console.log(index);

       index=300;

    },100)

    setTimeout(function (){

      console.log('300s');

      console.log(index);

    },300)

  }

  function fn4(){

    //解決方案1      建立副本

    var index=1;

    setTimeout(function (){

       console.log(index);

       index=300;

       console.log("值被改变了")

    },100)

    //解決方法二 使用快級別作用域

    setTimeout(function (index){

      return function (){

      console.log("使用了闭包中的值value:"+index);

      }

      }(index),500)

  setTimeout(function (){

        console.log("没有使用闭包的值："+index)

      },400)

  }

  //现在有了新的方法 let使用我们的块级别作用域滴呀；

  function fn5(){

    var list = document.getElementById('list0');

       for(var i=1;i<=5;i++){

         var item=document.createElement("li");

         item.appendChild(document.createTextNode("item" +i));

         //再来绑定我们的额事件滴哎呀；

          (function (index){

             item.onclick=function (ev){

                  console.log(' item '+index)

             }

          })(i)

          list.appendChild(item);

       }

  }

  //形成我们的块级别作用域；

  function fn6(){

     var list=document.getElementById("list0");

     for(let i=1;i<=5;i++){

         var item=document.createElement("li");

          item.appendChild(document.createTextNode("item" +i));

          console.log(i);

          item.onclick=function(ev){

             console.log("item "+i);

          }

          list.appendChild(item);

     }

  }

  function test(){

    for(var i=1;i<=5;i++){

           setTimeout(function (){

              console.log(i);

           },300*i)

    }

  }

  function test2(){

    for(let i=1;i<=5;i++){

           setTimeout(function (){

                   console.log(i);

           },300*i)

    }

  }

  window.onload=function (){

   //test();

  console.log("--------------")

   test2();

     //fn1();

     // fn2();

     // fn3();

     //fn4();

     //fn5(); fn 基本能够达到我们想要的基本效果了

    // fn6();

    // 这样，就形成了我们的局部变量；

  }

</script>

<body>

   <div id="list0"></div>

   <div id="list1"  style="background-color:red;"></div>

   <div id="list2"></div>

   <div id="list3"></div>

</body>

</html>

這裡還有一種情況：就是我們數組；

  function showInfo(){

    //现在还有我们想要的基本法则；

     var arr=[];

     for (var i=0;i<5;i++){

        arr[i]=function (){

           return i;

         }

     }

     console.log(arr);

     console.log(arr[0]());

     console.log(arr[1]());

    var arr=[];

     for (var i=0;i<5;i++){

            arr[i]=i; //这里已经进行了赋值操作操作呀；

        }

     console.log(arr);

     console.log(arr[0]);

     console.log(arr[1]);

      //然后我们通过传递参数的形式

     var arr=[];

     for (var i=0;i<5;i++){

            ///一个立即执行的函数里，返回一个函数;再加上我们的()就执行了的啊；

            arr[i]=(function (index){

                  return function (){

                     return index;

                  }

            })(i)

        }

     console.log(arr);

     console.log(arr[0]());

     console.log(arr[1]());

    //当然，最后，可以使用我们es5 中的 let关键之；

  }

JS实现动画原理一（闭包方式）的更多相关文章

  1. js中动画原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  4. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  5. Dojo动画原理解析

    dojo中动画部分分为两部分:dojo/_base/fx, dojo/fx.dojo/_base/fx部分是dojo动画的基石,里面有两个底层API:animateProperty.anim和两个常用 ...

  6. js实现继承的5种方式 （笔记）

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  7. Atitit 视频编码与动画原理attilax总结

    Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...

  8. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  9. 解析 iOS 动画原理与实现

    这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...

随机推荐

  1. meta标签的用法

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  2. [zt]不到最后一秒你永远不知道结局且震撼你心灵的高端电影

    总有一部电影,让你憋着尿直到看完~~~ http://share.renren.com/share/230538513/17679574169?from=0101090202&shfrom=0 ...

  3. Notepad++ Shortcuts 快捷键

    Ctrl-C   Copy Ctrl-X   Cut Ctrl-V   Paste Ctrl-Z   Undo Ctrl-Y   Redo Ctrl-A   Select All Ctrl-F   L ...

  4. metasploit 常用命令汇总

    1.连接数据并显示一些信息 db_connet username:password@ip address/database name db_destroy 同上 db_import 文件名字 db_h ...

  5. [项目机会]citrix 虚拟桌面对于java等高CPU占用率如何解决

    citrix 虚拟桌面对于java等高CPU占用率如何解决 问题1:java等客户端对于虚拟桌面cpu影响较大,但是有些用户的确需要使用java支持的程序,是否可以通过其他途径来解决? 问题2:对于其 ...

  6. A trip through the Graphics Pipeline 2011_01

    It’s been awhile since I posted something here, and I figured I might use this spot to explain some ...

  7. Apache Spark源码走读之17 -- 如何进行代码跟读

    欢迎转载,转载请注明出处,徽沪一郎 概要 今天不谈Spark中什么复杂的技术实现,只稍为聊聊如何进行代码跟读.众所周知,Spark使用scala进行开发,由于scala有众多的语法糖,很多时候代码跟着 ...

  8. Javascript 笔记与总结（2-14）事件

    常用事件: ● onclick 元素点击时 ● onfocus 元素获得焦点时 ● onblur 元素失去焦点时 ● onmouseover 鼠标经过时 ● onsubmit 表单提交时(<fo ...

  9. 用diss 实现 push动画

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { AAAViewController * aaa = [[AAAVie ...

  10. 20145317彭垚 《Java程序设计》第7周学习总结

    20145317彭垚 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1 时间的度量·即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Uni ...