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()实现逐帧动画的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 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实现js动画性能好

    使用requestAnimationFrame实现js动画性能好.先给大家简单介绍下requestAnimationFrame比起setTimeout.setInterval有哪些优势? 示例一: requestAnimationFrame 比起 setTimeout.setInterval的优势主要有两点: 1.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒6

  • JavaScript requestAnimationFrame动画详解

    进入web2.0时代,在网页中实现动画已经不再局限于一种方法 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果. 认识JavaScrip

  • 深入理解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图不能捕捉动画完成的事件.所以,

随机推荐