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

用法:

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. 免费申请 WebStorm 使用许可 - free JetBrains Open Source license(s)

    闲聊 步入前端切图仔行列的我曾多次纠结过「到底使用哪种编辑器写前端好用?」这样的问题,前前后后尝试过 Dreamweaver .HBuilder .Sublime Text .Atom 和现在主要使用 ...

  2. 什么是ajax和json,说说他们的优缺点

    ajax异步传输的js和xml.实现页面无刷新状态更新页面和异步提交 所谓异步,简单解释就是:向服务器发送请求的时候,我们不必等待结果,而是同时做其他的事情,等到有了结果后它自己会根据设定进行后续操作 ...

  3. 服务器远程连接mysql问题解决

    一. centos下解决远程连接不上的问题. 1.查看centos 下防火墙是否关闭: 通过进程: ps -aux |grep firewalld ps -ef |grep firewalld 通过服 ...

  4. nginx 开启phpinfo

    在nginx配置文件中加 location / { //如果是资源文件,则不走phpinfo模式 if (!-e $request_filename){ ewrite ^/(.*)$ /index.p ...

  5. Home Assistant系列--之树莓派安装Samba 和 Jupyter Notebook

    1.什么是Samba? Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上 ...

  6. 使用cmd时cd命令失效

    使用cmd时cd命令失效   近日使用cmd时总是出现无法cd到指定目录的情况 如下图所示 输入cd命令后依旧停留在原始路径 解决方法: 输入 cd D:\CE-5\Training_Sanple\n ...

  7. 【Mac】安装 Homebrew 出错 Failed during: git fetch origin master:refs/remotes/origin/master --tags --force

    今天在 Mac 装 Homebrew 遇到了一个问题,在网上找了大量解决方案,做个总结. Mac 版本 High Sierra 10.13.6. 问题描述 在 Mac 终端输入了 Homebrew 官 ...

  8. 第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛--J-强迫症的序列

    链接:https://www.nowcoder.com/acm/contest/90/J 来源:牛客网 1.题目描述 牛客网是IT求职神器,提供海量C++.JAVA.前端等职业笔试题库,在线进行百度阿 ...

  9. 20170607 JDBC课堂实践 任务四

    20170607 JDBC课堂实践 任务四 题目 查询world数据库,查询哪个国家的平均寿命最长. 码云链接 SQL语句 SELECT Code, Name, LifeExpectancy FROM ...

  10. 20155239《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    实验内容及步骤 使用JDK编译.运行简单的java程序 2.使用IDEA编辑.编译.运行.调试Java程序 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 先建立一个文件夹命名为Co ...