实现动画效果核心方式的js代码


Posted in Javascript onSeptember 27, 2013

下边我就简单说一下过程和原理。
第一步:实现一个匿名函数并能自己执行。

(function(){ })()

 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数。
第二步:实现动画,以改变一个box的秀明度来说明。
id为animation的div
<div id="animation"></div>

 要实现animation的透明渐变,需要不断改变其透明度opacity,我们这样实现
for(var i=0;i<10;i++){ 
    setTimeout((function(pos){ 
        return function(){ 
            someAnimation(pos); 
        } 
    })(i/10),i*100) 
}

下面我们来解释一下这段代码,这段代码比较复杂和难于理解,所以刚开始不明白也没事,慢慢就懂了,首先解释一下setTimeout在此处的用法
setTimeout((function(){})(i/10),i*100)

 setTimeout第一个参数为要执行的函数,第二个参数为时间参数,意为多久后开始执行
而js没有块的概念,作用域范围是以函数为准的,所以我们这里使用的闭包,实现原理如下:
(function(){ 
return function(){} 
})()

 这校才可以执行for循环,达到我们想要的结果,如果我们不使用闭包,代码会如下:
for(var i=0;i<10;i++){ 
setTimeout(function(pos){ 


someAnimation(pos); 

}(i/10),i*100) 
}

这样的for循环只会执行一次,即i=9时,感兴趣的同学可以自己试试
到目前为止,整个代码是这个样子滴
(function(){ 
            function someAnimation(args){ 
                document.getElementById("animation").style.opacity=args; 
            } 
            for(var i=0;i<10;i++){ 
                    setTimeout((function(pos){ 
                        return function(){ 
                            someAnimation(pos); 
                        } 
                    })(i/10),i*100) 
            } 
})()

 这样实现了id为animation的box透明度从0到1的一次变化。
第三步,实现不停地变化,我们用setInterval来实现
setInterval也是两个参数,第一个是要执行的函数,第二个是执行间隔时间
至此代码如下:
(function(){ 
            function someAnimation(args){ 
                document.getElementById("animation").style.opacity=args; 
            } 
            setInterval(function(){ 
                for(var i=0;i<10;i++){ 
                    setTimeout((function(pos){ 
                        return function(){ 
                            someAnimation(pos); 
                        } 
                    })(i/10),i*100) 
                } 
            },2000); 
        })()

下次我会实现这个代码的面向对象化设计和出一些具体的实现方案,方便学习使用。
全部代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #animation{width:500px;height:350px;background-color:red;}
    </style>
</head>
<body>
    <div id="animation">
    </div>
    <script type="text/javascript">
        (function(){
            function someAnimation(args){
                document.getElementById("animation").style.opacity=args;
            }
            setInterval(function(){
                for(var i=0;i<10;i++){
                    setTimeout((function(pos){
                        return function(){
                            someAnimation(pos);
                        }
                    })(i/10),i*100)
                }
            },2000);
        })()
    </script>
</body>
</html>
Javascript 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
浅谈javascript中return语句
Jul 15 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
javascript中call和apply方法浅谈
Sep 27 #Javascript
文本框回车提交与禁止提交示例
Sep 27 #Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 #Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 #Javascript
js克隆对象、数组的常用方法介绍
Sep 26 #Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 #Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 #Javascript
You might like
农民和部队如何穿矿
2020/03/04 星际争霸
第十一节 重载 [11]
2006/10/09 PHP
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
vue项目实现分页效果
2021/03/24 Vue.js
二年级评语大全
2014/04/23 职场文书
活动总结书
2014/05/08 职场文书
个人课题方案
2014/05/08 职场文书
安全生产承诺书范文
2014/05/22 职场文书
环保标语大全
2014/06/12 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
爱国主义主题班会
2015/08/14 职场文书