js requestanimationframe动画　时间控制

最新推荐文章于 2024-06-21 08:42:30 发布
最新推荐文章于 2024-06-21 08:42:30 发布
阅读量5.9k 收藏 1
点赞数
分类专栏： js 
requestanimationframe动画会传入一个时间参数，为动画开始到现在的时间。

动画开始的时间在动画开始函数中用，window.performance.now 或　Date.now()来获取
 

<!DOCTYPE html>
<html>
<head>
<title>Script-based animation using requestAnimationFrame</title>
<style type="text/css">
div { position: absolute; left: 10px; top:100px; padding: 50px;
  background: crimson; color: white; }
</style>
<script type="text/javascript">
    var requestId = 0;
    var startime = 0;
    var lpos = 0;
    var elm;

    function init() {
        elm = document.getElementById("animated");
    }
    
    function render() {
        elm.style.left = ((lpos += 3) % 600) + "px";
        requestId = window.requestAFrame(render);
    }

    function start() {
        if (window.performance.now) {
            startime = window.performance.now();
        } else {
            startime = Date.now();
        }
        requestId = window.requestAFrame(render);
    }
    function stop() {
        if (requestId)
            window.cancelAFrame(requestId);        
    }


    // handle multiple browsers for requestAnimationFrame()
    window.requestAFrame = (function () {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                // if all else fails, use setTimeout
                function (callback) {
                    return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
                };
    })();

    // handle multiple browsers for cancelAnimationFrame()
    window.cancelAFrame = (function () {
        return window.cancelAnimationFrame ||
                window.webkitCancelAnimationFrame ||
                window.mozCancelAnimationFrame ||
                window.oCancelAnimationFrame ||
                function (id) {
                    window.clearTimeout(id);
                };
    })();

   
</script>
</head>
<body οnlοad="init();">

<div id="animated">Hello there.</div>
<button οnclick="start()">Start</button>
<button οnclick="stop()">Stop</button>
</body>
</html>
 

 


                

        

        

    




    

      

        

            

              
                
                  grtreexyz
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html5新增的定时器requestAnimationFrame实现进度条功能

				
			

			

				

					09-27
				

			

		

		

			
				
html5为什么新增一个requestAnimationFrame，他的出现是为了解决什么问题？带着这些问题跟随脚本之家小编一起学习吧

			
		

	



                

              
                



	

		

			

				
					
基于脚本的动画的计时控制（“requestAnimationFrame”）（转载）

				
			

			

				

					pucxin
				

				

					03-04
					
					386
					
				

			

		

		

			
				

Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对requestAnimationFrame 方法的支持，该方法通过在系统准备好绘制动画帧时调用该帧，从而为创建动画网页提供了一种更平滑更高效的方法。在此 API 之前，使用 setTimeout 和 setInterval 绘制的动画并没有为 Web 开发人员提供有效的方法来规划动画...

			
		

	



                


  
              

                


	

		

			

				
					
前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比

					
最新发布

				
			

			

				

					在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
				

				

					06-21
					
					3099
					
				

			

		

		

			
				
它会将回调函数加入到浏览器下一次重绘之前要执行的队列中。setInterval：与 setTimeout 类似，setInterval 也会将要执行的代码或函数放入事件循环队列中，但它在指定的时间间隔后会一直重复执行，直到 clearInterval 被调用或窗口被关闭。函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。

			
		

	





	

		

			

				
					
requestAnimationFrame()

				
			

			

				

					weixin_30295091的博客
				

				

					02-08
					
					192
					
				

			

		

		

			
				
window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。
注意:如果想得到连贯的逐帧动画，函数中必须重新调用requestAnimationFrame()。
如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常...

			
		

	



		

			
		



	

		

			

				
					
requestAnimationFrame

				
			

			

				

					nekoyui的博客
				

				

					06-06
					
					368
					
				

			

		

		

			
				
这个函数仅执行一帧动画的渲染，并根据条件判断是否结束，如果动画没有结束，则继续调用requestAnimationFrame并将自身作为参数传入。​	这个 updateAnimations()方法会周期性运行注册的动画任务，并反映出每个任务的变化（例如，同时更新滚动新闻和进度条）。​	可以看到，设置了50毫秒后执行，实际执行延迟时间远大于这个数值，这就会导致动画效果并不会达到想要的效果。​	以前，在JavaScript 中创建动画基本上就是使用 setInterval() 来控制动画的执行。

			
		

	





	

		

			

				
					
js时间动画

				
			

			

				

					qq_40417326的博客
				

				

					03-05
					
					492
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
JavaScript requestAnimationFrame动画详解

				
			

			

				

					10-19
				

			

		

		

			
				
主要为大家详细介绍了JavaScript requestAnimationFrame动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
使用requestAnimationFrame实现js动画性能好

				
			

			

				

					10-23
				

			

		

		

			
				
在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销，这篇文章给大家详细介绍使用requestAnimationFrame实现js动画

			
		

	





	

		

			

				
					
深入理解requestAnimationFrame的动画循环

				
			

			

				

					01-19
				

			

		

		

			
				
requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。它是跟着浏览器的绘制走的，如果浏览器绘制间隔是16.7ms，它就按这个间隔绘制；如果浏览器绘制间隔是10ms, 它...

			
		

	





	

		

			

				
					
requestAnimationFrame详解

				
			

			

				

					Mr_linjw的专栏
				

				

					10-26
					
					1065
					
				

			

		

		

			
				
简单来说，requestAnimationFrame 就是约定在下一次浏览器刷新前执行的一个定时器。类似setTimeout。window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。1、什么是requestAnimationFrame。

			
		

	





	

		

			

				
					
requestAnimationFrame函数使用的注意点

				
			

			

				

					Beam
				

				

					05-11
					
					1421
					
				

			

		

		

			
				
官方说明文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
注意点：
1、有开启就记得关闭
let stop = null
stop = requestAnimationFrame(this.animate)
window.cancelAnimationFrame(stop) // 取消动画

2、传递了时间参数
默认传递时间参数timestamp
requestAnimationFrame(lo

			
		

	





	

		

			

				
					
setTimeout、setInterval、requestAnimationFrame，定时器不准时

				
			

			

				

					luemeon的博客
				

				

					01-30
					
					841
					
				

			

		

		

			
				
变动观察器）是一种Web API，它允许开发者监视DOM树的变化并在这些变化发生时执行回调函数允许监视DOM树的变化，因此它也可以用于异步任务的调度。不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。是一种宏任务，但是优先级较低，可能在其他异步任务之后执行。这样设计的原因，如果在GUI渲染的时候，

			
		

	





	

		

			

				
					
2022年了！还在用定时器实现动画？赶紧试试requestAnimationFrame吧!

				
			

			

				

					发果叁
				

				

					07-28
					
					317
					
				

			

		

		

			
				
前面我们介绍的是我们使用JS实现动画常用的手段，不可否认，在以前确实可以这样使用，也是最好的办法。但是我们也需要正面这些问题，特别是随着电子设备的不断更新换代，屏幕的刷新率也出现很多种的情况下，如果继续使用定时器来实现动画，很可能会造成动画的卡顿以及性能的消耗。有问题就有解决方案！就非常完美的解决了定时器实现动画的各种问题。我们先来看看官网如何解释它的。告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。是一个API，即一个原生方法。我们先来看看API。一个。...

			
		

	





	

		

			

				
					
用JS做一个简易的时间显示动态效果

				
			

			

				

					weixin_46095138的博客
				

				

					07-04
					
					1255
					
				

			

		

		

			
				
用JS做一个时间动态显示效果

			
		

	





	

		

			

				
					
【超详细~】js的三大定时器：setTimeout、setInterval、requestAnimationFrame

					
热门推荐

				
			

			

				

					鱼骨编程
				

				

					04-08
					
					24万+
					
				

			

		

		

			
				
js三大定时器！进行了一个简短的总结

			
		

	





	

		

			

				
					
HTML/Javascript requestAnimationFrame（）时间timestamp 的理解和FPS(Frames Per Second) 实现（附代码）

				
			

			

				

					m0_60558800的博客
				

				

					01-18
					
					1274
					
				

			

		

		

			
				
requestAnimationFrame 函数不需要传入时间参数, 其刷新的频率一般是每秒60帧(FPS=60),这是大多数屏幕渲染的时间间隔,因此这也是游戏可以实现的最快的刷新频率。 但有时我们希望FPS<60, 比如说30FPS, 或者更慢一些， 这该如何实现呢？ 下面的代码即可以实现任意刷新频率FPS：


...

			
		

	





	

		

			

				
					
css动画, css animation, transition, requestanimationframe

				
			

			

				

					Johnny_Pig的博客
				

				

					01-10
					
					960
					
				

			

		

		

			
				
文章较长，头绪较乱，请在无聊时PC端浏览。
最近一两天一直在鼓捣css动画的内容，起因是最近在阅读css揭秘一书，内容质量确实值得初学者和初级开发者一看，作者为css组委会的一名成员，里面很多demo都从优化的角度去设置css。言归正传，昨天结束了书本的最后一张，css动画，在demo的实现过程中发现了很多有趣的css动画相关的知识点，于是现在也算是对css动画的一个总结。
写在前面
本文借

			
		

	





	

		

			

				
					
vue，requestAnimationFrame动画设置为30fps

				
			

			

				

					05-27
				

			

		

		

			
				
如果您想要将Vue动画设置为每秒30帧，您可以使用requestAnimationFrame（RAF）方法和Vue的transition组件。在Vue的transition组件中，您可以使用CSS或JS动画来定义动画效果。在JS动画中，您可以使用RAF方法来控制动画的帧率。

以下是一个示例代码，可以将Vue动画设置为每秒30帧：

```html
<template>
  <transition @enter="startAnimation">
    <div :style="{ transform: `translateX(${x}px)` }"></div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      lastTime: 0,
    };
  },
  methods: {
    startAnimation() {
      this.lastTime = performance.now();
      requestAnimationFrame(this.animate);
    },
    animate(now) {
      const deltaTime = now - this.lastTime;
      if (deltaTime > 33.33) {
        this.x += 1;
        if (this.x > 100) {
          this.x = 0;
        }
        this.lastTime = now;
      }
      requestAnimationFrame(this.animate);
    },
  },
};
</script>
```

在上面的代码中，我们使用了Vue的transition组件来包装一个div元素，并在enter事件中启动动画。在动画开始时，我们使用performance.now()方法记录当前时间，然后在RAF回调函数中计算出两次调用之间的时间差，如果时间差大于33.33毫秒（即每秒30帧），则更新x的值，并将lastTime设置为当前时间。最后，我们使用requestAnimationFrame()方法递归调用animate()方法，以便在每一帧中更新x的值。

请注意，这只是一个简单的示例代码，您需要根据自己的需求进行修改。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值