概述

Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画。该方法把一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

注意:如果你想在浏览器下次重绘之前继续更新下一帧动画,那么回调函数自身必须再次调用Window.requestAnimationFrame()

当你准备更新你的动画的时候,你应该调用该方法。这会要求你的动画函数在浏览器下次重绘之前被调用。回调的频率一般是60次/秒,但通常会按照W3C的建议与大多数网络浏览器中的显示刷新率匹配。为了提高性能和电池寿命,因此在大多数浏览器里,当requestAnimationFrame() 运行在后台标签页或者隐藏的的<iframe> 里时,requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

回调函数会被传入DOMHighResTimeStamp参数,DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位毫秒,最小精度为1ms(1000μs)。

语法

window.requestAnimationFrame(callback);

参数

callback

下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,该参数与performance.now()的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。

返回值

一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

范例

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute'; function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
} window.requestAnimationFrame(step);

Window.requestAnimationFrame()动画更新的更多相关文章

  1. window.requestAnimationFrame() ,做逐帧动画,你值得拥有

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...

  2. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  3. window.requestAnimationFrame()的使用,处理更流畅的动画效果

    https://blog.csdn.net/w2765006513/article/details/53843169 window.requestAnimationFrame()的使用 2016年12 ...

  4. 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...

  5. window.requestAnimationFrame

    今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...

  6. requestAnimationFrame动画方法

    一.动画方式 在HTML5/CSS3时代,实现动画的方式有许多种: 你可以用css3的animation和@keyframes: 可以用css3的transition: 还可以用原始的setTimeo ...

  7. 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  8. WebGL中使用window.requestAnimationFrame创建主循环

    今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...

  9. requestAnimationFrame 动画

    requestAnimationFrame : 调用这个方法,就是告诉浏览器要执行动画了,从而浏览器自动计算动画时间间隔,从而在恰当的时候刷新UI, 动画更加平滑. 他的用法和setTimeout() ...

随机推荐

  1. 日常破解---XCTF_APP1获取flag记录

    日常破解---XCTF_APP1获取flag记录 一.题目来源   来源:XCTF社区安卓题目app1 二.解题记录     1.首先安装到模拟器中运行一下,如下图所示,点击一下按钮,弹出提示年轻人不 ...

  2. 复制图片链接和标题生成Markdown文本

    写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...

  3. react-native app 屏幕适配方案(按照设计稿像素大小写就行)

    import React, { Component,PropTypes } from 'react'; import { Dimensions,PixelRatio,Platform,StatusBa ...

  4. 安装部署hyperledger fabric1.0

    安装环境 CentOS7 1.安装Docker Docker Hub在国外,安装会较慢,可用国内镜像DaoCloud.可执行以下命令安装Docker. sudo yum install -y yum- ...

  5. 学会了这些redis知识点,面试官会觉得你很nb(转自十年技术大牛)

    是数据结构而非类型 很多文章都会说,redis支持5种常用的数据类型,这其实是存在很大的歧义.redis里存的都是二进制数据,其实就是字节数组(byte[]),这些字节数据是没有数据类型的,只有把它们 ...

  6. php中的进程

    pcntl扩展:主要的进程扩展,完成进程创建于等待操作. posix扩展:完成posix兼容机通用api,如获取进程id,杀死进程等. sysvmsg扩展:实现system v方式的进程间通信之消息队 ...

  7. 用Setuptools构建和分发程序包

    目录 使用Setuptools构建和分发软件包 开发人员指南 安装setuptools 基本使用 指定项目的版本 新增和更改的setup()关键字 包括数据文件 参考示例 使用Setuptools构建 ...

  8. js 完美运动框架

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 浅析Redis分布式锁---从自己实现到Redisson的实现

    当我们在单机情况下,遇到并发问题,可以使用juc包下的lock锁,或者synchronized关键字来加锁.但是这俩都是JVM级别的锁,如果跨了JVM这两个锁就不能控制并发问题了,也就是说在分布式集群 ...

  10. python-参考书

    真的是找了很多的参考书,但是看懂,上手用的就一本比较好的<编程小白的第1本python入门书>非常的好. 属于那种一看就懂,能说明白的.别的,要么就是翻译的外文的,有点难以理解,要么就是中 ...