实现动画效果核心方式的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不是基础的基础
Dec 24 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
防止文件缓存的js代码
Jan 10 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
js表单登陆验证示例
Oct 19 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 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
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
JavaScript的内存释放问题详解
2015/01/21 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python列表计数及插入实例
2014/12/17 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Python如何实现机器人聊天
2020/09/10 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
自动化专业本科毕业生求职信
2013/10/20 职场文书
日语系毕业求职信
2014/07/27 职场文书
入党积极分子群众意见
2015/06/01 职场文书
小学生家长意见
2015/06/03 职场文书
大学生入党自传2015
2015/06/26 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
会议主持词通用版
2019/04/02 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python