Heim  >  Artikel  >  Web-Frontend  >  实现动画效果核心方式的js代码_javascript技巧

实现动画效果核心方式的js代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:21:171079Durchsuche

下边我就简单说一下过程和原理。
第一步:实现一个匿名函数并能自己执行。

复制代码 代码如下:

(function(){ })()

 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数。
第二步:实现动画,以改变一个box的秀明度来说明。
id为animation的div
复制代码 代码如下:



 要实现animation的透明渐变,需要不断改变其透明度opacity,我们这样实现
复制代码 代码如下:

for(var i=0;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  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                    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                    setTimeout((function(pos){
                        return function(){
                            someAnimation(pos);
                        }
                    })(i/10),i*100)
                }
            },2000);
        })()

下次我会实现这个代码的面向对象化设计和出一些具体的实现方案,方便学习使用。
全部代码如下
复制代码 代码如下:




   
   
   


   

   

   


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn