用js源码做出缓动效果,关于for循环和settimeout

JavaScript042

用js源码做出缓动效果,关于for循环和settimeout,第1张

因为你定义了200个定时器

从第一个到最后一个定时器

每个休息的时间是i的25倍

而i从0到200改变

因此

定时器的休息时间越来越久

于是看得到移动的效果

不然就一起移动了,看不到效果,因为都是最后的那个200

<div id = "lala" style="width: 100pxheight: 100px"></div>       //定义一个div

 

 

<script>

var i=-1     //定义一个量来做显示数字

var u=1000     //定义一个变量来做递增速度

var key=true

function a(){

   if(i == 10 || key == false){

      if(i == 10){

    i--

key = false

u = u + 100 //速度每次延迟一毫秒

document.getElementById("lala").innerHTML = i

setTimeout(function(){a()},u)

  }else if(i == 0){

    key = true

u = 1000

setTimeout(function(){a()},u)

  }else{

    i--

document.getElementById("lala").innerHTML = i

u = u + 100 //速度每次延迟一毫秒

        setTimeout(function(){a()},u)

  }

   }else{

      i++

      document.getElementById("lala").innerHTML = i

      if(i == 10){

         u = 1000

      }else{

         u = u + 100  //速度每次延迟一毫秒

      }    

      setTimeout(function(){a()},u)

   }

}

window.onload = function(){

     a()

}

</script>

亲测可用啊啊啊啊啊啊啊啊啊!!!!!!!!!

使用缓动功能,您可以加快或放慢动画的开头或结尾速度,以获得更加逼真或更加令人愉悦的效果。该技术用于修改 Flash 计算补间中的属性关键帧之间的属性值的方式。如果不使用缓动,Flash 在计算这些值时,会使对值的更改在每一帧中都一样。如果使用缓动,则可以调整对每个值的更改程度,从而实现更自然、更复杂的动画。缓动是应用于补间属性值的数学曲线。补间的最终效果是补间和缓动曲线中属性值范围组合的结果。例如,在制作汽车经过舞台的动画时,如果让汽车从停止开始缓慢加速,然后在舞台的另一端缓慢停止,则动画会显得更逼真。如果不使用缓动,汽车将从停止立刻到全速,然后在舞台的另一端立刻停止。如果使用缓动,则可以对汽车应用一个补间动画,然后使该补间缓慢开始和停止。一个未应用缓动的运动路径。请注意帧沿路径的均匀分布。已应用“停止并启动(中)”缓动的同一运动路径。请注意路径末尾附近帧的浓度,产生更逼真的汽车加速和减速。可以在属性检查器或动画编辑器中应用缓动。在属性检查器中应用的缓动将影响补间中包括的所有属性。在动画编辑器中应用的缓动可以影响补间的单个属性、一组属性或所有属性。缓动可以简单,也可以复杂。Flash 包含一系列的预设缓动,适用于简单或复杂的效果。在动画编辑器中,还可以创建自己的自定义缓动曲线。缓动的常见用法之一是在舞台上编辑运动路径并启用浮动关键帧以使每段路径中的运行速度保持一致。然后可以使用缓动在路径的两端添加更为逼真的加速或减速。在向属性曲线应用缓动曲线时,属性曲线图形区域中将显示缓动曲线的可视叠加。通过将属性曲线和缓动曲线显示在同一图形区域中,叠加使得在测试动画时了解舞台上所显示的最终补间效果更为方便。因为动画编辑器中的缓动曲线可以很复杂,所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性 X、Y 和 Z 外,还可以使用缓动曲线创建其他任何属性的复杂补间。