实现动画效果核心方式的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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
js改变Iframe中Src的方法
May 05 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 布尔操作实现代码
2013/03/23 Python
Python的print用法示例
2014/02/11 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
使用Python的turtle模块画国旗
2019/09/24 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
Java面试题及答案
2012/09/08 面试题
Python里面search()和match()的区别
2016/09/21 面试题
硕士生工作推荐信
2014/03/07 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python