为了做好导航菜单，有时候需要在菜单下拉的时候实现动画效果，所以这几天就研究了研究如何用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. 【分布式】Zookeeper与Paxos

    一.前言 在学习了Paxos在Chubby中的应用后,接下来学习Paxos在开源软件Zookeeper中的应用. 二.Zookeeper Zookeeper是一个开源的分布式协调服务,其设计目标是将那 ...

  2. Hive读取外表数据时跳过文件行首和行尾

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 转载请注明出处 有时候用hive读取外表数据时,比如csv这种类型的,需要跳过行首或者行尾一些和数据无关的或者自 ...

  3. c#面向对象基础技能——学习笔记（五）委托技术在开发中的应用

    委托 delegate 1.是一种全新的面向对象语言的特性: 2.开发事件驱动程序变得非常简单: 3.简化多线程难度. 理解委托:可以理解成一个方法的指针.(接收的变量是方法) 步骤: 1.声明委托, ...

  4. C#开发微信门户及应用(3)--文本消息和图文消息的应答

    微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习下微信的相关开发,也就成为计划的安排事情之一了.本系列文章希望从一个循序渐进的角度上,全面介绍微 ...

  5. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Gradle project sync failed

    在Android Studio中运行APP时出现了以下错误: gradle project sync failed. please fix your project and try again 解决的 ...

  7. Java IO之字符流和文件

    前面的博文介绍了字节流,那字符流又是什么流?从字面意思上看,字节流是面向字节的流,字符流是针对unicode编码的字符流,字符的单位一般比字节大,字节可以处理任何数据类型,通常在处理文本文件内容时,字 ...

  8. 360安全卫士造成Sharepoint文档库”使用资源管理器打开“异常

           备注:企业用户还是少用360为妙        有客户反馈:部门里的XP SP2环境客户机全部异常,使用资源管理器打开Sharepoint文档库,看到的界面样式很老土,跟本地文件夹不一样 ...

  9. React Native windows搭建记录

    因为是window电脑上运行的,所以测试的是安卓 1: 安装jdk:jdk-8u45-windows-x64.exe 2: 配置JAVA的环境变量 在安卓的配置基础上添加一个变量ANDROID_HOM ...

  10. ArrayList、Vector、LinkedList的区别联系？

    1.ArrayList.Vector.LinkedList类都是java.util包中,均为可伸缩数组. 2.ArrayList和Vector底层都是数组实现的,所以,索引数据快,删除.插入数据慢. ...