前提：

     你必须了解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. The Stable Marriage Problem

    经典稳定婚姻问题 “稳定婚姻问题(The Stable Marriage Problem)”大致说的就是100个GG和100个MM按照自己的喜欢程度给所有异性打分排序.每个帅哥都凭自己好恶给每个MM打 ...

  2. 当PHP引擎试图实例化一个未知类的操作

    在PHP开发过程中,如果希望从外部引入一个class,通常会使用include和require方法,去把定义这个class的文件包含进来,但是这样可能会使得在引用文件的新脚本中,存在大量的includ ...

  3. [转]Visual Studio 实用扩展推荐

    本文转自 http://www.cnblogs.com/stg609/p/3726898.html Visual Studio 拥有非常不错的可扩展性,在之前的文章中,我也给大家示范了如何进行编辑器的 ...

  4. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  5. jquery修改a标签的href链接和文字

    可以先体验一下效果:http://keleyi.com/keleyi/phtml/jquery/2.htm 以下修改a标签的href链接和修改文字的代码: <script type=" ...

  6. 用MSoffice里的绘图工具

    试过一些绘图表的工具,在xbeta推荐的替代visio一文中介绍的一些软件.之前用得最多的就是Dia,在linux下也有.现在才发现在微软的office下的绘图工具已经足够我使用了,不需要专业的图形符 ...

  7. Javascript 笔记与总结（1-6）Javascript 面向对象

    在 JavaScript 中,有对象,没有类(但有构造函数). 在 JavaScript 中,对象不依赖于类而存在,可以直接生成. {key:value, key:value} 这种格式的对象,成为 ...

  8. mysq数据库再次理解

    1.表中的一条记录就是一个object,object有很多属性,对应表中的字段.object的属性对应的值就是字段值 2.外键是关联表关系用的.表关系的确立只能通过外键 但更高效的策略是,在数据库中部 ...

  9. 【翻译】Kinect v2程序设计(C++-) AudioBeam篇

    Kinect v2,Microphone Array可以用来对于水平面音源方向的推测(AudioBeam)和语音识别(Speech Recognition).这一节是介绍如何取得AudioBeam. ...

  10. PL/SQL Developer 显示中文乱码问题

    简单版本: 首先,通过 select userenv('language') from dual; 查询oracle服务器端的编码,如为:AMERICAN_AMERICA.ZHS16GBK; 在我们的 ...