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在浏览器的主线程中运行,而主线程中还有其 ...
随机推荐
- React-Native系列Android——Touch事件原理及状态效果
Native原生相比于Hybrid或H5最大长处是具有流畅和复杂的交互效果,触摸事件便是当中重要一项,包括点击(Click).长按(LongClick).手势(gesture)等. 以最简单常见的点击 ...
- 09-spring学习-资源访问接口
目标: 1,掌握Resource接口的使用. 2,掌握ResourceLoader接口的使用. 3,掌握各种资源数据的读取操作. 具体内容: 要想进行资源读取操作,首先想到IO包中提供的操作类. 但是 ...
- 学会Git玩转Github笔记(二)——Git使用
一.Git基本工作流程 Git工作区域 向仓库中添加文件流程 二. Git初始化及仓库创建和操作 基本信息设置 . 设置用户名 git config --global user.name 'itcas ...
- 使用httpModules做一些事
httpmodules是http管道处理程序 可以重写接口进行一些在请求到达api接口前做全局处理 这是一个过滤关键词的例子 using System; using System.Collection ...
- rsync工具介绍
rsync工具介绍 http://man.linuxde.net/rsync rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.rsync使用所谓的“rsync算法” ...
- 通过Socket连接一次传输多个文件
近期在做一个通过WIFI在手机之间传输文件的功能.须要在手机之间建立一个持久的Socket 连接并利用该连接数据传输.能够一次传输一个或多个文件. 在一次传输多个文件时,遇到了一个困难:怎样在接收文件 ...
- 用js来传参到父网页实现
今天搞了半天,用location.href提交参数到后台,结果php无法接收到参数,这让我找了半天,终于发现原因是本页被另外的主页引用了,最终发现问题出在提交js上,最终用parent.locatio ...
- springboot页面缓存和url缓存实例
@Autowired RedisService redisService; @Autowired GoodsService goodsService; @Autowired ThymeleafView ...
- cacheManager载入问题
net.sf.ehcache.CacheException: Another unnamed CacheManager already exists in the same VM. Please pr ...
- 关于UNIX/Linux下安装《UNIX环境高级编程》源代码的问题
<UNIX环境高级编程(第三版)>是一本广为人知的unix系统编程书籍. 但是,书中的代码示例,要想正确的编译运行,要先做好准备工作: 1.下载源代码 传送门:http://apueboo ...