js动画最佳实现——requestAnimationFrame

我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≈16.67)

var dis = 0,timer = 0;
clearInterval(timer);
timer = setInterval(function(){
   div.style.left = ++dis;
  if(dis>=50) clearInterval(timer)
},16)

实现js动画最好的是requestAnimationFrame:

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。
2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

var dis =0;
function animation(){
  requestAnimationFrame(function(){
      div.style.left = ++dis;
      if(disx<50) animation();
  })
}
animation();
时间: 2024-10-25 22:31:33

js动画最佳实现——requestAnimationFrame的相关文章

性能更好的js动画实现方式&mdash;&mdash;requestAnimationFrame

用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeout和setInterval有着严重的性能问题,虽然某些现代浏览器对这两函个数进行了一些优化,但还是

js 动画方法之requestAnimationFrame

js动画实现的方法到现在有三种 1 css3: 通过animattion+keyframes;或 transition 2. setTimeout/setInterval: setTimeout/setInterval:通过递归调用同一方法来不断更新动画元素以达到动起来的效果,动画过度绘制,浪费 CPU 周期以及消耗额外的电能等问题. 3.requestAnimationFrame: requestAnimationFrame:是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用

性能更好的js动画实现方式——requestAnimationFrame

本文转载,原文地址:http://www.cnblogs.com/2050/p/3871517.html 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTi

性能更好的js动画实现方式---requestAnimationFrame

用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是有不少局限性,比如不是所有属性都能参与动画.动画缓动效果太少.无法完全控制动画过程等等.所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画,可是setTimeout和setInterval有着严重的性能问题,虽然某些现代浏览器对这两函个数进行了一些优化,但还是

js动画之requestAnimationFrame回调函数代替setTimeout

继续完善我上一篇博客:https://www.cnblogs.com/duanhuarong/p/12195466.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * {margin: 0;padding: 0;} #div1 {wi

CSS VS JS动画,哪个更快[译]

英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js动画库.在<Javascript网页动画设计>一书中对这个库有很多更具体的剖析,对Velocity及JS动画感兴趣的可以一看. 基于Javascript的动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富媒体移

CSS vs JS动画:谁更快?

CSS vs JS动画:谁更快? 2016-05-16 前端大全 (点击上方公众号,可快速关注) 英文:Julian Shapiro 译者:MZhou's blog 链接:http://zencode.in/19.CSS-vs-JS动画:谁更快?.html 这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?.Julian Shapiro 也是 Velocity.js 的创造者.这是一个非常高效.简单易用的JS动画库.他在

JS动画和CSS动画

一. JS动画和CSS动画区别. CSS实现动画:animation transition transform JS实现动画:setInterval  setTimeout  requestAnimationFrame JS动画: 优点: 1. 过程控制,可以在动画播放过程中对动画进行控制:开始.暂停.回放.终止.取消都是可以做到的. 2. 动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有JavaScript动画才能完成. 3. CSS3有兼容性问题,而JS大

JS动画与CSS动画

一.JS动画(setInterval setTimeOut requestAnimationFrame) 优点: 1)过程控制能力强.可以对动画工程进行精准的控制,暂停.取消.开始.终止都可以. 2)动画效果多.炫酷.有一些效果是CSS动画所不能实现的 3)兼容性比较高 缺点: 1)由于JS是通过不断的操作DOM和CSS的属性来实现动画效果的,这需要不断的重排(reflow)和重绘(repaint),非常消耗浏览器的内存.(在PC端有浏览 器可以分配的内存比较大,动画的重排(reflow)和重绘