requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API:

  js一般是借助setTimeout或setInterval这两个函数实现动画,性能不佳。

  css3动画,性能和流畅度得到了很大的提升。但是css3动画还是有不少局限性,比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点:

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。

2、在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。

下面是一些缓动函数requestAnimationFrame 的一些基础知识:

各个浏览器之间的兼容:

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

动画的逻辑:

记录当前时间startTime,作为动画开始的时间。 
请求下一帧,带上回调函数。 
下一帧触发时,回调函数的第一个参数为当前的时间,再与startTime进行比较,确定时间间隔ellapseTime。 
判断ellapseTime是否已经超过事先设定的动画时间time,如果超过,则结束动画。 
计算动画属性变化的差值differ = to - from,再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。 
计算出现在应该变化到的位置Math.round(from + step),并重新对样式赋值。 
继续请求下一帧。

动画函数:

function animate(element, name, from, to, time) {
time = time || 800; // 默认0.8秒
var style = element.style,
startTime = new Date;
function go(timestamp) {
var progress = timestamp - startTime;
if (progress >= duration) {
style[name] = to + 'px';
return;
}
var now = (to - from) * (progress / duration);
style[name] = now.toFixed() + 'px';
requestAnimationFrame(go);
}
style[name] = from + 'px';
requestAnimationFrame(go);
}

参考:http://www.jb51.net/article/32497.htm

更好的浏览器动画实现 requestAnimationFrame的更多相关文章

  1. 性能更好的js动画实现方式——requestAnimationFrame

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  2. 性能更好的js动画实现方式——requestAnimationFrame

    本文转载,原文地址:http://www.cnblogs.com/2050/p/3871517.html 用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css ...

  3. 性能更好的js动画实现方式---requestAnimationFrame

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  4. requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  5. js动画之requestAnimationFrame

    1.setTimeout和setInterval 在讲setTimeout和setInterval之前,先讲一下异步执行的运行机制.(同步执行也是如此,因为它可以被视为没有异步任务的异步执行.) (1 ...

  6. 更好的逐帧动画函数 — requestAnimationFrame 简介

    本文将会简单讲讲 requestAnimationFrame 函数的用法,与 setTimeout/setInterval 的区别和联系,以及当标签页隐藏时 requestAnimationFrame ...

  7. html无卡顿动画实现——requestAnimationFrame

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. RequestAnimationFrame更好的实现Javascript动画

    一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实 ...

  9. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

随机推荐

  1. MIUI7,Android版本5.0.2,一个程序发送自定义广播,另一个程序没有接收到

    对照<第一行代码——Android>进行学习,第五章中说到广播包的相关知识,前面获取广播等程序例程都可以跑的通,但是在5.3.2节中,程序A发送自定义广播,并接收自定义广播,同时程序B也接 ...

  2. 用Qemu模拟vexpress-a9 (一) --- 搭建Linux kernel调试环境【转】

    转自:http://www.cnblogs.com/pengdonglin137/p/5023342.html#_label2 阅读目录(Content) 环境介绍: 下载Linux内核 安装arm的 ...

  3. REX系统2

    REX(Real Time Executive)是一个面向嵌入式应用的,简单高效的,抢先式,多任务实时操作系统,支持基于优先级的任务调度算法(支持优先级反转).它提供了任务控制,任务同步,互斥,定时器 ...

  4. JDK 6和JDK 7的intern方法之不同

    首先介绍下intern方法: 如果常量池中存在当前字符串, 就会直接返回当前字符串. 如果常量池中没有此字符串, 会将此字符串放入常量池中后, 再返回. 1 2 在<深入理解Java虚拟机> ...

  5. linux bash shell之declare

    一. #Set the right GC options based on the what we are runningdeclare -a server_cmds=("master&qu ...

  6. MySQL触发器Trigger实例篇

    定义: 何为MySQL触发器? 在MySQL Server里面也就是对某一个表的一定的操作,触发某种条件(Insert,Update,Delete 等),从而自动执行的一段程序.从这种意义上讲触发器是 ...

  7. 经典面试题:js继承方式下

    上一篇讲解了构造函数的继承方式,今天来讲非构造函数的继承模式. 一.object()方法 json格式的发明人Douglas Crockford,提出了一个object()函数,可以做到这一点. fu ...

  8. Codeforces 429B Working out(递推DP)

    题目链接:http://codeforces.com/problemset/problem/429/B 题目大意:两个人(假设为A,B),打算健身,有N行M列个房间,每个房间能消耗Map[i][j]的 ...

  9. sqlserver导出为EXcel--CSV格式

    DataTable dt = Connect.BindTable(" SELECT  名称,地址,当前日期  FROM  table   GROUP BY 名称,地址,当前日期 order ...

  10. Pg168-1

    1.Pg168-1 package org.hanqi.pn0120; public class Computer { private double neicundx=10; public doubl ...