Javascript动画简介

分享于 

13分钟阅读

Web开发

  繁體

内容

介绍

在过去的几年中,互联网的发展迅速。 简要介绍了AJAX的方法,并与网络用户的软件。技术和期望的发展进行了推广。

Web页面永远变得更加友好和丰富,实现了平滑的过渡和软图形;。 许多网站通过这样的过渡或者闪烁按钮或者向上滚动和向下滚动来特征动画。 可以使用Javascript创建所有这些动画,并且本文将介绍这一点。

前提条件

为了能够跟踪这篇文章并使用它,需要一般了解 Javascript,但是因为它提供了Javascript动画的简单概念。

动画对象

这个概念

在Javascript中动画对象的概念与动画对象的概念相同。 在某一特定时间段内,被动画的对象在一定的时间段内被一些"步骤"集所改变。 在每个步骤中,对象可以任意数量的方式进行更改,这是导致对象出现动画的。 这个动画概念可以使用Javascript实现相对容易的实现,如解释。

基本动画

我个人最喜欢的动画是一个淡入函数,只是因为它只改变了对象的一个属性( 不透明度)。 但是,在进入代码之前,需要解释两个关键的函数和样式:

setTimeout ( 代码,毫秒) :这个函数是Javascript库的一部分,并在 milliseconds的数量经过后调用指定的code。 它在所有浏览器中都支持作为标准。

obj.style.opacity , obj.style.filter :在CSS2中引入了不透明度样式。 它在 IE 和mozilla基于浏览器的浏览器中得到支持,但在两种。 IE 是以过滤器实现的,值为 alpha(opacity=o)o 为 0至,0为数字,完全透明和,完全透明,完全透明,完全不透明,。

随着淡入动画,物体的褪色不透明度逐渐增加或者减少从开始不透明度到结束不透明度。 这个例子演示了从 100%不透明度到 0%透明度的淡出动画,超过 10"步骤":

<script language="Javascript">
..//Detect browser for later usebrowser = undefined;if(navigator.userAgent.indexOf("MSIE")!=-1)
 browser = "IE";else browser = "Mozilla";//Called to fade elementfunction fade(element)
{
 //We will fade the object in 10 stepsvar steps = 10;
 //Set the starting opacity setOpacity(element, 1);
 //Loops the timer functionfor(i=0; i<steps; ++i) {
 setTimeout(function(){fadeCallback(element);}, (30*i));
 }
}//Callback to timer functionfunction fadeCallback(element)
{
 //Get the current opacityvar opacity=getOpacity(element);
 //Set the new opacity setOpacity(element, opacity-0.1);
}//Gets an element's opacityfunction getOpacity(element)
{
 var opacity = null;
 //Get the opacity based on the current browser usedif(browser=="IE") {
 filter = element.style.filter;
 if(filter) {
 alpha = filter.split("alpha(opacity=");
 opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
 }
 }
 else {
 opacity = element.style.opacity;
 }
 return opacity;
}//Sets an element's opacityfunction setOpacity(element, o)
{
 //Set the opacity based on the current browser usedif(browser=="IE") {
 element.style.filter = "alpha(opacity=" + (o*100) + ")";
 }
 else {
 element.style.opacity = o;
 }
}
..
</script>

动画可以通过调用 淡入淡出( 元素) 其中,element 是对元素的引用,例如:

<div style="width: 50px; height: 50px; background-color: red;" onClick="fade(this);"></div>

当它被点击时,它将使DIV淡出。

由于这可能很难理解,我将把每一节分成更易于管理的部分:

..if(navigator.userAgent.indexOf("MSIE")!=-1)
 browser = "IE";else browser = "Mozilla";
..

第一段代码仅仅是检测浏览器是 IE 还是"mozilla"( 作为非ie浏览器)的简单方法。 代码使用 navigator.userAgent 变量,返回当前浏览器标识符字符串,然后检查它是否包含"msie",因为这将意味着当前浏览器是 IE。 如果不是,那么使用哪个浏览器是不相关的,因为它们都会使用另一个标准的不透明。

fade() 函数
..function fade(element)
{
 //We will fade the object in 10 stepsvar steps = 10;
 //Set the starting opacity setOpacity(element, 1);
 //Loops the timer functionfor(i=0; i<steps; ++i) {
 setTimeout(function(){fadeCallback(element);}, (30*i));
 }
}
..

这里函数被调用以淡入淡出元素。 它需要一个参数 element,它是要被淡入的元素的句柄。 iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 setTimeout ( ) 这里还使用了函数。 它在循环中调用以调用 fadeCallback ( ) 函数,它将更改淡入元素的不透明度。 (30*i) 以毫秒的数表示,因此 fadeCallback ( ) 每 30毫秒调用一次。 元素的不透明度设置为 1作为起始不透明度。 还请注意,回调函数具有 function() {} 周围。这是因为当函数有应用于它的参数时,如果它只是作为 fadeCallback ( 元素) 然后将立即调用函数,而不会将它的设置为计时器函数。

fadeCallback() 函数
..function fadeCallback(element)
{
 //Get the current opacityvar opacity=getOpacity(element);
 //Set the new opacity setOpacity(element, opacity-0.1);
}
..

这里函数是由调用方调用的回调函数 setTimeout ( ) 函数检索褪色的元素的当前不透明度,然后通过将当前不透明度降低 0.1来设置新的不透明度。

getOpacity() 函数
..function getOpacity(element)
{
 var opacity = null;
 //Get the opacity based on the current browser usedif(browser=="IE") {
 filter = element.style.filter;
 if(filter) {
 alpha = filter.split("alpha(opacity=");
 opacity = alpha[1].substr(0,(alpha[1].length-1))/100;
 }
 }
 else {
 opacity = element.style.opacity;
 }
 return opacity;
}
..

这里函数获取淡出的元素的当前不透明度。 就像前面提到的,基于 IE 和mozilla的浏览器不同地处理不透明度,因此这个函数使用前面设置的browser 变量来确定使用。 然后返回不透明度,以 0至 1 ( 其中 0是完全透明的,1是完全不透明的) 之间的比例。

setOpacity() 函数
..function setOpacity(element, o)
{
 //Set the opacity based on the current browser usedif(browser=="IE") {
 element.style.filter = "alpha(opacity=" + (o*100) + ")";
 }
 else {
 element.style.opacity = o;
 }
}
..

这里函数设置淡入的元素的不透明度。 getOpacity ( ) 函数将 IE 和基于mozilla的浏览器不透明度处理区分为以前设置的browser 变量。

就像前面提到的,这只是一篇介绍性文章,我只讨论如何淡化元素,但是在元素中淡出的原则是相同的,除了开始不透明度和每一步的透明度都增加。

setTimeout() 或者 setInterval()?

有什么区别?

Javascript中有两个关键函数可以用于对对象进行动画处理。 其中第一个已经演示过的是 setTimeout(),另一个是 setInterval()。 它们都执行类似的功能,但有细微的差别。 它们共同的部分是在循环经过指定的毫秒后调用函数,但是 setTimeout() 在循环中调用了该函数后,在循环中调用了该函数,直到调用了函数为止。

那么哪个函数最适合使用? 这两种方法经过实验后,我发现它们都同样有用,并且都需要编写代码来检查动画是否完成;对于 setTimeout(),这两种方法都是一样的。 淡入淡出( ) 函数根据步骤的数量和 setInterval() 来计算调用的次数,回调函数中的代码确定动画是否完成。 因为动画演示简单,setTimeout() 更适合于调用动画回调函数,在 fade() 函数中,动画回调函数的计算次数是确定的,而计时器ID必须存储为。 但是,我发现对于更大的。更复杂的动画, setInterval ( ) 函数更适合,尤其是对于每一步不透明度增量/递减这样的方法。

使用 setInterval ( )的示例

动画的一个示例 setInterval ( ) 函数是:

..//Detect browser for later use..//Stores the setInterval() IDtimer = null;//Called to fade elementfunction fade(element)
{
 //Set the timer interval to 30ms and store the setInterval() ID timer = setInterval(function(){fadeCallback(element);}, 30);
}//Callback to timer functionfunction fadeCallback(element)
{
 //Get the current opacityvar opacity=getOpacity(element);
 //Clears the interval if at the end of the animationif((opacity-0.1)==0)
 clearInterval(timer);
 //Set the new opacity setOpacity(element, opacity-0.1);
}//Gets an element's opacityfunction getOpacity(element)
{
. . 
}//Sets an element's opacityfunction setOpacity(element, o)
{
. . 
}
..

这里示例与使用以下方法的示例非常类似 setTimeout ( ) 函数,但有几个不同的更改。 可以看到,用于确定动画是否完成的代码包含在动画回调函数中:

if((opacity-0.1)==0)
 clearInterval(timer);

这个利用 clearInterval ( ) 函数,该函数删除用 setInterval ( ) 函数,它只是创建计时器的ID。 如下面的示例所示,计时器ID是在 setInterval ( ) 函数被调用:

timer = setInterval(function(){fadeCallback(element);}, 30);

就像你所看到 setInterval ( ) ID必须才能在使用后清除计时器。

结束语

在阅读本文之后,你应该能够:

  • 了解Javascript计时器的工作原理
  • 能够实现基本的对象动画
  • 了解之间的差异 setTimeout ( )setInterval ( ) 鍑芥暟

历史记录

23rd 2008年07月: 未修改的第一个副本