首先字面理解,请求动画框架,

用法:

var nextFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) { return setTimeout(callback, 1); };
})();
nextFrame(loop);
loop是动画
例子:
loop:function(){
    defaults.origin+=defaults.Vx;
con.style["-webkit-transform"]="translateY("+defaults.origin+"px)"
defaults.origin<=-51?self.noop():nextFrame(self.back) }
它的作用是什么?相当于我不知道浏览器绘制时间,所以我请求浏览器根据它自身绘制时间来执行这个动画,
对比css3优势,一切css3可以表现的,他都可以实现,css3不可以实现的它也可以实现

关于requestanimationframe的更多相关文章

  1. 动画requestAnimationFrame

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

  2. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  3. 我的前端故事----疯狂倒计时(requestAnimationFrame)

    很久没有更新博客了...为了双十一准备了不少活动,终于结束了,有时间静静的坐下来总结一下了,在活动中最常用的就是倒计时了,晚上也有很多倒计时的例子了,那么今天带来的是一个新的方法和思路. 既然要介绍新 ...

  4. 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

    × 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...

  5. requestAnimationFrame,Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  6. 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...

  8. HTML5探秘:用requestAnimationFrame优化Web动画

    本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画

  9. 使用requestAnimationFrame做动画效果二

    3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...

  10. 使用requestAnimationFrame做动画效果一

    最近学习了requestAnimationFrame,看了张鑫旭直白易懂,但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3 ...

随机推荐

  1. App Store 加急审核解析

    什么是加急审核 首先,提交二进制文件到 App Store,是要交给 App Store Review 团队去审核的.下面这句话是我从他们那边拿到的官方数据: On average, 50 perce ...

  2. vs code 写C#心得

    !!!官方指南请访问: https://docs.microsoft.com/zh-cn/dotnet/core/index code runner 插件 ---------------------- ...

  3. 团队展示网页 HTML模版

    之前帮着领导,参加了iGEM的校内赛的网页制作,一开始也是用的现成的模版,但后面修修改改几乎面目全非了- 这里分享一下自己的网站,可以用做团队展示的网页模版,文件在末尾,大家自行下载吧-- 这里贴两张 ...

  4. C#基础 const和readonly关键字

    静态常量 所谓静态常量就是在编译期间会对变量进行解析,再将常量的值替换成初始化的值.动态常量 所谓动态常量就是编译期间会将变量标记只读常量,而不用常量的值代替,这样在声明时可以不初始化,可以延迟到构造 ...

  5. C#——数据库取数据,DataGridView显示数据

    使用未封装的方法连接数据库 步骤: 一.确定连接方式(以SqlServer为例): ①Windows身份验证. string ConnectionType = "server=.;datab ...

  6. Java设计模式(24)——行为模式之解释器模式(Interpreter)

    一.概述 概念 自己定义文法,实际中还是很少出现的,作了解 给出一篇网友的参考博文:http://blog.csdn.net/ylchou/article/details/7594135

  7. 20155229付钰涵-虚拟机安装及LINUX命令学习

    安装Ubuntu遇到的问题 问题一: 新建虚拟电脑的版本只有32-bit,与老师所给教程中的64-bit不符.为此我上百度搜寻了答案. 第一种方法: 控制面板--程序与功能--启动或关闭windows ...

  8. 20155239 2016-2017-2 《Java程序设计》第10周学习总(2017-04-22 16:26

    教材学习 1.基本概念划分 OIS的七层协议: 应用层.表示层.会话层.运输层.网络层.数据链路层.物理层. OIS的五层协议: 应用层.运输层.网络层.数据链路层.物理层. 由下往上介绍如下: 2. ...

  9. 学号20155308 2006-2007-2 《Java程序设计》第3周学习总结

    学号20155308 2006-2007-2 <Java程序设计>第3周学习总结 教材学习内容总结 对象(Object):存在的具体实体,具有明确的状态和行为 类(Class):具有相同属 ...

  10. 【笔记学习】Linux系统与虚拟机学习

    Part 1 : 基于VirtualBox虚拟机安装Ubuntu 问题剪辑 --给一开始未知的我的科普指南 1. VirtualBox不能创建64位虚拟机 解决办法: 开启虚拟化技术 详细:重启电脑, ...