requestAnimationFrame 实现JS动画
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动画的更多相关文章
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 用requestAnimationFrame优化Web动画
requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来.如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在 ...
- js动画实现(一)
requestAnimationFrame是什么? 在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来.如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在 ...
- js动画最佳实现——requestAnimationFrame
我们经常用setInterval来实现动画,其实这种做法不是太好,因为不同浏览器的刷新频率也不一样(一般认为设置16为最佳,按每秒60帧算,1000/60≍16.67) var dis = 0,tim ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- 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 首 ...
- css3动画与js动画的区别
css与 js动画 优缺点比较 我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...
随机推荐
- JavaScript 数组去重并统计重复元素出现的次数
1.方法一 var arr = [1, 2, 3, 1, 2, 4]; function arrayCnt(arr) { var newArr = []; for(var i = 0; i < ...
- Redis使用经验
首先,缓存的对象有三种: 1:数据库中单条的的数据(以表名跟id作为key永久保存到Redis),在有更新的地方都要更新缓存(不适用于需要经常更新的数据): 2:对于一些不分页,不需要实时(需要多表查 ...
- JavaScript入门:002—JS代码放置的位置
JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...
- golang 的编译安装以及supervisord部署
go的编译 go的编译相对很简单,只需要一个命令即可完成,进入项目开发路径,输入 go install <appName> 即可在bin文件夹下生成可执行文件 appName.此文件可直接 ...
- EMQ配置“ClientId 认证”
EMQ配置“ClientId 认证” 基于 MQTT 客户端 ID 认证 clientId配置文件地址 /etc/emqttd/plugins/emq_auth_clientid.conf 内容如下: ...
- C#事件-自定义事件的使用方法(转载)
1.声明一个委托类 public delegate SomethingChangedHandler(object sender,EventArgs e); 2.在你的类中声明一个事件绑定到该委托 pu ...
- php的instanceof和判断闭包Closure
类型运算符 instanceof 用于确定一个 PHP 变量是否属于某一类 class 的实例,在此之前用 is_a(),但是后来 is_a() 被废弃 <?php class MyClass ...
- Python学习笔记7:函数对象及函数对象作參数
一.lambda函数 比如: fun1 = lambda x,y: x + y print fun1(3,4) 输出:7 lambda生成一个函数对象.该函数參数为x,y,返回值为x+y.函数对象赋给 ...
- JS事件类型详解
一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouse ...
- 新标准C++程序设计读书笔记_类和对象
面向对象的程序设计方法 抽象:将某类客观事物共同特点(属性)归纳出来,形成一个数据结构(可以用多个变量描述事物的属性):将这类事物所能进行的行为也归纳出来,形成一个个函数,这些函数可以用来操作数据结构 ...