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-实现动画原理二（非闭包方式）
---------------------------------------------------------------------更新：有了新的方法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实现动画原理一（闭包方式）的更多相关文章
- js中动画原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- Dojo动画原理解析
dojo中动画部分分为两部分:dojo/_base/fx, dojo/fx.dojo/_base/fx部分是dojo动画的基石,里面有两个底层API:animateProperty.anim和两个常用 ...
- js实现继承的5种方式 （笔记）
js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...
- Atitit 视频编码与动画原理attilax总结
Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...
- SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
- 解析 iOS 动画原理与实现
这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...
随机推荐
- [zt]给你的Mp4大换血，精选Touch里3年收集的900多首歌，"经典不忍去的""最新近流行的"，与你共享~~
如果你是音乐爱好者: 这些歌, 请戴上耳机, 调大音量, 一个人听 ,全世界 都是你的!!!!! (一)这些歌很温暖,没有金属味,适合有阳光的午后,很悠闲... [Anaesthesia]Maximi ...
- 【液晶模块系列基础视频】5.3.X-GUI字体驱动3
============================= 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:ht ...
- Javascript 笔记与总结（2-5）window 对象
浏览器 window 对象(BOM)是浏览器宿主对象,和 js 语言无关. [window 对象的方法] window.alert(message); window.confirm(message); ...
- java int转integer方法
由于AutoBoxing的存在,以下代码在JDK1.5的环境下可以编译通过并运行. int i = 0; Integer wrapperi = i; 还有其他方法? JDK1.5为Integer增加了 ...
- django + ngxin + uwsgi 站点部署
第一步 创建项目启动脚本 # 创建项目启动脚本 vi /etc/init.d/project_name #!/bin/bash # Description: uwsgi manager scripts ...
- C++类型转化分析（1）
仔细想想地位卑贱的类型转换功能(cast),其在程序设计中的地位就象goto语句一样令人鄙视.但是它还不是无法令人忍受,因为当在某些紧要的关头,类型转换还是必需的,这时它是一个必需品. 不过C风格的类 ...
- 【IOS笔记】View Programming Guide for iOS -1
原文:View Programming Guide for iOS View and Window Architecture Views and windows present your applic ...
- selenium弹窗关闭
经历了两天的摸索,终于能把弹窗关闭.定位弹窗关闭按钮也尝试了直接用id 定位,class name定位,css_selector定位,连Xpath定位也用上了,但还是关闭不了. 分析其中原因:程序过程 ...
- 来到这里,我放弃了多少- UI基础-疯狂猜图,我们都疯狂了-
小问题也要问 学习最重要的是 自律 我昨天晚上3点睡的, 这两天一点也没睡 0.99*0.99 每天差一点 日积月累就很多了 关键字,在字典里查一下,在类里面查查 瑞详博客下载器 跑步后精神多了,白 ...
- 最大子序列和 o(n)
问题: 给定一整数序列A1, A2,... An (可能有负数),求A1~An的一个子序列Ai~Aj,使得Ai到Aj的和最大 例如:整数序列-2, 11, -4, 13, -5, 2, -5, -3, ...