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了!

  • 相关阅读:
    十度好友问题
    TCP传输连接建立与释放详解
    Android多点触控技术实战,自由地对图片进行缩放和移动
    如何判断一个变量是数组Array类型
    HDU 4725 The Shortest Path in Nya Graph-【SPFA最短路】
    解决外贸电商难题,PayPal中国外贸电商大会圆满礼成
    动物-蛇:家蛇
    动物-蛇:水蛇
    动物-鱼:河蟹
    动物-鱼:河虾
  • 原文地址:https://www.cnblogs.com/lodadssd/p/6266673.html
Copyright © 2011-2022 走看看