zoukankan      html  css  js  c++  java
  • requestAnimationFrame动画方法

    一、动画方式

    在HTML5/CSS3时代,实现动画的方式有许多种:

    你可以用css3的animation和@keyframes;

    可以用css3的transition;

    还可以用原始的setTimeout()、setInterval()达到动画效果,以及jQuery中animate方法;

    今天我们要介绍是另一种动画方式:requestAnimationFrame(callback)!

    二、基本语法

    可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值:

    ID=requestAnimationFrame(callback)//callback为回调函数

    requestAnimationFrame的用法和setTimeout()类似都是单回调,其优势在于跟着浏览器的绘制走。相当一部分的浏览器的显示频率是16.7ms,即1s绘制60次。如果间隔时间小于16.7ms动画就会卡顿,而requestAnimationFrame就是在浏览器绘制是调用动画!总结requestAnimationFrame的优势如下:

    1.跟着浏览器的绘制走,动画更流畅;

    2.页面最小化了,或者被Tab切换关灯了,页面绘制全部停止,资源高效利用;

    3.更省电,尤其是对移动终端。

    如果想停止动画调用,方法如下:

    cancelAnimationFrame(ID);

    三、兼容情况

    Android设备压根就不支持嘛!其他设备基本上跟CSS3动画的支持一模一样。

    如果需要简单兼容,可这么写:

    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    但是呢,并不是所有设备的绘制时间间隔是1000/60 ms, 以及上面并木有cancel相关方法,所以,就有下面这份更全面的兼容方法:

    (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);
        };
    }());

    然后我们就能像使用setTimeout一样来使用requestAnimationFrame了!

  • 相关阅读:
    VI命令----用于检索
    NIO框架Mina学习
    Android闹钟开发与展示Demo
    Golang mysql使用举例---连接本地数据库
    mysql通信协议
    大小端定义
    npm是什么
    菜鸟如何学习vue
    cgred不能自动将pid放入tasks
    centos7上为什么不使用libcgroup进行资源限制
  • 原文地址:https://www.cnblogs.com/lodadssd/p/6266673.html
Copyright © 2011-2022 走看看