实现动画效果核心方式的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 闭包
Sep 15 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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中Session的概念
2006/10/09 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python斐波那契数列的计算方法
2018/09/27 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
护理个人求职信范文
2014/01/08 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
初三化学教学反思
2014/01/23 职场文书
文明寄语大全
2014/04/11 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
门店店长岗位职责
2015/04/14 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python