requestAnimationFrame会随着浏览器绘制窗口的频率来绘制动画以达到最好的用户体验

// let raf = (function(){
// return window.requestAnimationFrame ||
// window.webkitRequestAnimationFrame ||
// window.mozRequestAnimationFrame ||
// function( callback ){
// window.setTimeout(callback, 1000 / 60);//每秒实现60帧的动画效果最好
// };
// })();
let raf = window.requestAnimationFrame;
let box = document.getElementsByClassName('box')[0];
let w = 100;
let t = 0;
function loop(){
box.style.width = w + 'px';
if(w < 500){
w += 1;
box.style.width = w + 'px'; }
t = raf(loop)
} loop()
box.addEventListener('click',()=>{//实现点击暂停动画,再次点击继续运行的效果
if(t){
window.cancelAnimationFrame(t);
t = 0;
}else{
t = raf(loop)
}
})

requestAnimationFrame 实现JS动画的更多相关文章

  1. 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  2. 用requestAnimationFrame优化Web动画

    requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来.如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在 ...

  3. js动画实现(一)

    requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来.如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在 ...

  4. js动画最佳实现——requestAnimationFrame

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

  5. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

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

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  7. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  8. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  9. css3动画与js动画的区别

    css与 js动画 优缺点比较   我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...

随机推荐

  1. JavaScript 数组去重并统计重复元素出现的次数

    1.方法一 var arr = [1, 2, 3, 1, 2, 4]; function arrayCnt(arr) { var newArr = []; for(var i = 0; i < ...

  2. Redis使用经验

    首先,缓存的对象有三种: 1:数据库中单条的的数据(以表名跟id作为key永久保存到Redis),在有更新的地方都要更新缓存(不适用于需要经常更新的数据): 2:对于一些不分页,不需要实时(需要多表查 ...

  3. JavaScript入门:002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...

  4. golang 的编译安装以及supervisord部署

    go的编译 go的编译相对很简单,只需要一个命令即可完成,进入项目开发路径,输入 go install <appName> 即可在bin文件夹下生成可执行文件 appName.此文件可直接 ...

  5. EMQ配置“ClientId 认证”

    EMQ配置“ClientId 认证” 基于 MQTT 客户端 ID 认证 clientId配置文件地址 /etc/emqttd/plugins/emq_auth_clientid.conf 内容如下: ...

  6. C#事件-自定义事件的使用方法(转载)

    1.声明一个委托类 public delegate SomethingChangedHandler(object sender,EventArgs e); 2.在你的类中声明一个事件绑定到该委托 pu ...

  7. php的instanceof和判断闭包Closure

    类型运算符 instanceof 用于确定一个 PHP 变量是否属于某一类 class 的实例,在此之前用 is_a(),但是后来 is_a() 被废弃 <?php class MyClass ...

  8. Python学习笔记7:函数对象及函数对象作參数

    一.lambda函数 比如: fun1 = lambda x,y: x + y print fun1(3,4) 输出:7 lambda生成一个函数对象.该函数參数为x,y,返回值为x+y.函数对象赋给 ...

  9. JS事件类型详解

    一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouse ...

  10. 新标准C++程序设计读书笔记_类和对象

    面向对象的程序设计方法 抽象:将某类客观事物共同特点(属性)归纳出来,形成一个数据结构(可以用多个变量描述事物的属性):将这类事物所能进行的行为也归纳出来,形成一个个函数,这些函数可以用来操作数据结构 ...