JS使用window.requestAnimationFrame()实现逐帧动画
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。
基本语法:
requestID = window.requestAnimationFrame(callback); // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS) requestID = window.mozRequestAnimationFrame(callback); // Firefox < 23 requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit
浏览器支持情况:
下面通过两个简单的Demo介绍下window.requestAnimationFrame() 方法的使用
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.box {
margin: 0 auto;
width: 100%;
height: 5000px;
}
.box1 {
background: #b94a48;
}
.box2 {
background: #fb8c00;
}
.box3 {
background: #669900;
}
.box4 {
background: #c0a16b;
}
.top {
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
background: #8dc7ff;
border-radius: 50%;
cursor: pointer;
}
</style>
<script>
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 6000 / 60)
}
})()
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
window.msCancelAnimationFrame ||
function (callback) {
window.clearTimeout(callback)
}
})()
function scrollToTop() {
let top = window.pageYOffset
const duration = 320
const step = top / (duration / (1000 / 60)) >> 0
const fn = () => {
if (top >= 0) {
top -= step
window.scrollTo(0, top)
fn.rafTimer = window.requestAnimationFrame(fn)
} else {
window.scrollTo(0, 0)
window.cancelAnimationFrame(fn.rafTimer)
}
}
fn.rafTimer = window.requestAnimationFrame(fn)
}
</script>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="top" onclick="scrollToTop()"></div>
</body>
</html>
锚点定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点定位</title>
<style>
.top {
margin: 100px auto;
cursor: pointer;
}
.top1 {
color: #b94a48;
}
.top2 {
color: #fb8c00;
}
.top3 {
color: #669900;
}
.top4 {
color: #c0a16b;
}
.box {
margin: 0 auto;
width: 100%;
height: 5000px;
}
.box1 {
background: #b94a48;
}
.box2 {
background: #fb8c00;
}
.box3 {
background: #669900;
}
.box4 {
background: #c0a16b;
}
</style>
<script>
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 6000 / 60)
}
})()
window.cancelAnimFrame = (function () {
return window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.oCancelAnimationFrame ||
window.msCancelAnimationFrame ||
function (callback) {
window.clearTimeout(callback)
}
})()
function goPosition(index) {
let top = 0
let distance = document.getElementById(index).offsetTop
const duration = 320
const step = distance / (duration / (1000 / 60)) >> 0
const fn = () => {
if (distance >= top) {
top += step
window.scrollTo(0, top)
fn.rafTimer = window.requestAnimationFrame(fn)
} else {
window.cancelAnimationFrame(fn.rafTimer)
}
}
fn.rafTimer = window.requestAnimationFrame(fn)
}
</script>
</head>
<body>
<div class="top top1" onclick="goPosition('box1')">跳到第一个</div>
<div class="top top2" onclick="goPosition('box2')">跳到第二个</div>
<div class="top top3" onclick="goPosition('box3')">跳到第三个</div>
<div class="top top4" onclick="goPosition('box4')">跳到第四个</div>
<div id="box1" class="box box1"></div>
<div id="box2" class="box box2"></div>
<div id="box3" class="box box3"></div>
<div id="box4" class="box box4"></div>
</body>
</html>
网上技术大牛针对浏览器兼容封装源码:
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
到此这篇关于JS使用window.requestAnimationFrame()实现逐帧动画的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript requestAnimationFrame动画详解
进入web2.0时代,在网页中实现动画已经不再局限于一种方法 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果. 认识JavaScrip
-
使用requestAnimationFrame实现js动画性能好
使用requestAnimationFrame实现js动画性能好.先给大家简单介绍下requestAnimationFrame比起setTimeout.setInterval有哪些优势? 示例一: requestAnimationFrame 比起 setTimeout.setInterval的优势主要有两点: 1.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒6
-
window.requestAnimationFrame是什么意思,怎么用
再看别人实现粒子效果的时候会有以下代码: 复制代码 代码如下: window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callb
-
缓动函数requestAnimationFrame 更好的实现浏览器经动画
写缓动函数用到requestAnimationFrame函数,之前了解过一些,但总觉得又不是很了解,所以翻译一篇老外的文章,以便学习分享. requestAnimationFrame是什么? 以前我们做动画需要一个定时器,每间隔多少毫秒就做出一些改变.现在有个好消息:浏览器厂商已经决定提供一个专门做动画的方法,即requestAnimationFrame(),而且基于浏览器的层面也能更好的进行优化.但是呢,这只是一个做动画的基础API,即不基于DOM元素的style变化,也不基于canvas,或
-
深入理解requestAnimationFrame的动画循环
一.初识requestAnimationFrame requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始.不知道最佳循环间隔时间的问题.它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms,它就按这个间隔绘制:如果浏览器绘制间隔是10ms, 它就按10ms绘制.这样就不会存在过度绘制的问题,动画不会丢帧. 内部是这么运作的: 浏览器页面每次要重绘,就会通知requestAnimationFrame; 这是资源非常高效的一种利用方式. 怎么讲呢?
-
JS使用window.requestAnimationFrame()实现逐帧动画
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio
-
如何利用node.js开发一个生成逐帧动画的小工具
前言 在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际开发项目中,我们也可以定制一个属于自己的npm包,来提高自己的工作效率. 为什么要开发一个工具包? 减少重复性的工作,不再需要复制其他项目再删除无关代码,或者从零创建一个项目和文件. 根据交互动态生成项目结构和所需要的文件等. 减少人工检查的成本. 提高工作效率,解
-
Android动画之逐帧动画(Frame Animation)实例详解
本文实例分析了Android动画之逐帧动画.分享给大家供大家参考,具体如下: 在开始实例讲解之前,先引用官方文档中的一段话: Frame动画是一系列图片按照一定的顺序展示的过程,和放电影的机制很相似,我们称为逐帧动画.Frame动画可以被定义在XML文件中,也可以完全编码实现. 如果被定义在XML文件中,我们可以放置在/res下的anim或drawable目录中(/res/[anim | drawable]/filename.xml),文件名可以作为资源ID在代码中引用:如果由完全由编码实现,我
-
Android逐帧动画实现代码
逐帧动画(Frame-by-frame Animations)顾名思义就是一帧接着一帧的播放图片,就像放电影一样.可以通过xml实现也可以通过java代码实现.逐帧动画适合实现比较简单的动画效果,如果要实现复杂动画不太建议使用逐帧动画. xml方式实现: step 1 : 在res/drawable目录下一个文件sample_animlist.xml: <?xml version="1.0" encoding="utf-8"?> <animatio
-
Android 逐帧动画创建实例详解
Android 逐帧动画创建实例详解 前言: 我们看早期电影的时候,电影通常是一张一张播放,用我们现在专有名词来说,就是一帧帧来,安卓同样有这样动画效果的编排形式. 那么我们先定义逐帧动画xml文件 <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" an
-
Android动画之逐帧动画(Frame Animation)基础学习
前言 在Android中,动画Animation的实现有两种方式:Tween Animation(补间动画)和Frame Animation(帧动画).渐变动画是通过对场景里的对象不断做图像变换(平移.缩放.旋转等)产生动画效果.帧动画则是通过顺序播放事先准备好的图像来产生动画效果,和电影类似. 下面我们就来学习下Android中逐帧动画的基础知识. 原理 : 人眼的"视觉暂留" 方式 : 1.在java代码中 ( new AnimationDrawable().addFrame(ge
-
Android编程之简单逐帧动画Frame的实现方法
本文实例讲述了Android编程之简单逐帧动画Frame的实现方法.分享给大家供大家参考,具体如下: 1.逐帧动画 即是通过播放预先排序好的图片来实现动态的画面,感觉像是放电影. 2.实现步骤: ① 在工程里面导入要播放的图片.此简单例子中为start_icon1,2,3. ② 在工程res文件目录下新建一个anim文件夹,在里面新建一个start_animation.xml格式文件,此文件用来定义动画播放图片的顺序及每一张图片显示停留时间. 代码如下: <?xml version="1.
-
iOS实现逐帧动画做loading视图
本文实例为大家分享了iOS实现逐帧动画做loading视图的具体代码,供大家参考,具体内容如下 我封装了一个可复用的loading视图组件,用于按照一定周期逐帧播放加载动画.代码如下: .h文件 #import <UIKit/UIKit.h> //加载状态 typedef enum { FZImageSequenceLoadingStatusStop = 1, // 停止 FZImageSequenceLoadingStatusLoading, // 加载中 FZImageSequenceLo
-
Android动画系列之帧动画和补间动画的示例代码
Android 提供三种动画:帧动画.补间动画和属性动画,本篇文章介绍帧动画以及补间动画的使用,属性动画的使用将在后面的文章中分享,那就来复习一下这两种动画的使用吧. FrameAnimation FrameAnimation 即逐帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建 FrameAnimation 可用 xml 定义也可直接使用代码创建. xml创建帧动画 在 res/drawable 文件夹下创建一个 drawable 文件,使用 animation-list 标签,具
-
javascript帧动画(实例讲解)
前面的话 帧动画就是在"连续的关键帧"中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容.本文将详细介绍javascript帧动画 概述 [分类] 常见的帧动画的方式有三种,包括gif.CSS3 animation和javascript git和CSS3 animation不能灵活地控制动画的暂停和播放.不能对帧动画做更加灵活地扩展.另外,gif图不能捕捉动画完成的事件.所以,