为了做好导航菜单，有时候需要在菜单下拉的时候实现动画效果，所以这几天就研究了研究如何用js实现动画效果，实现动画核心要用到两个函数，一个是setTimeOut,另一个是setInterval.

下边我就简单说一下过程和原理。

第一步：实现一个匿名函数并能自己执行。

（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>
 

用js实现动画效果核心方式的更多相关文章

  1. JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...

  2. JS/JQ动画效果

    1.弹出框 <style> .mask { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: ...

  3. js实现动画效果框架

    RT,是参照慕课的教程做的.两个多小时的教程,看完了然后晚上的时候做了下,看的时候感觉明白了,但其实做的时候还是有很多小细节需要处理的. 上代码,思想什么的直接去慕课看教程就好了.点击这里 注释也比较 ...

  4. Object-C 里面的animation动画效果,核心动画

    #import "CoreAnimationViewController.h" @interface CoreAnimationViewController ()@property ...

  5. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  6. Android动画效果之Tween Animation（补间动画）

    前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation ...

  7. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  8. Fiori里花瓣的动画效果实现原理

    Fiori里的busy dialog有两种表现形式,一种是下图里的花朵形状,由5个不断旋转的花瓣组成.另一种是下图的3/4个圆环不断旋转的效果. 关于前者的效果,可以看我制作的这个视频.这个视频是手动 ...

  9. UI动画效果

    UI界面的动画效果总结 方式1:头尾式 //开始动画 [UIView beginAnimations:nil context:nil]; //设置动画时间 [UIView setAnimationDu ...

随机推荐

  1. 使用session页面控制登录入口及购物车效果的实现

          由于 Session 是以文本文件形式存储在服务器端的,所以不怕客户端修改 Session 内容.实际上在服务器端的 Session 文件,PHP 自动修改 Session 文件的权限,只 ...

  2. Java I/O and NIO [reproduced]

    Java I/O and NIO.2---Five ways to maximize Java NIO and NIO.2---Build more responsive Java applicati ...

  3. Redis命令拾遗三（列表List类型）

    本文版权归博客园和作者吴双本人共同所有.转载和爬虫请注明原文地址 Redis五种数据类型之列表类型 Redis五种数据类型之列表类型.你可以存储一个有序的字符串列表一类数据.比如你想展示你所存储的所有 ...

  4. (原创)解决.net 下使用uploadify，在火狐浏览器下的error 302

    简单粗劣说下哈,通过uploadify中flash在火狐下上传,造成了erroe 302, 是因为其session丢失,并修改了其sessionID. 网上有很多案列,可并没有这么直接.感觉绕了点弯. ...

  5. is not in the sudoers file的解决方法

    遇到这个问题 修改sudoers 文件   /etc/sudoers 添加

  6. boost.python笔记

    boost.python笔记 标签: boost.python,python, C++ 简介 Boost.python是什么? 它是boost库的一部分,随boost一起安装,用来实现C++和Pyth ...

  7. 细谈Slick（6）－ Projection：ProvenShape，强类型的Query结果类型

    在Slick官方文档中描述:连接后台数据库后,需要通过定义Projection,即def * 来进行具体库表列column的选择和排序.通过Projection我们可以选择库表中部分列.也可以增加一些 ...

  8. linux(七)__shell脚本编程

    一.什么是shell脚本 shell除了是命令解释器之外还是一种编程语言,用shell编写的程序类似于DOS下的批处理程序. 它是用户与操作系统之间的一个接口. shell脚本语言非常擅长处理文本类型 ...

  9. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...

  10. 炫酷的html5（Drag 和 drop）拖放

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...