关于requestanimationframe
首先字面理解,请求动画框架,
用法:
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的更多相关文章
- 动画requestAnimationFrame
前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
- 深入理解定时器系列——被誉为神器的requestAnimationFrame
与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...
- 我的前端故事----疯狂倒计时(requestAnimationFrame)
很久没有更新博客了...为了双十一准备了不少活动,终于结束了,有时间静静的坐下来总结一下了,在活动中最常用的就是倒计时了,晚上也有很多倒计时的例子了,那么今天带来的是一个新的方法和思路. 既然要介绍新 ...
- 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame
× 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...
- requestAnimationFrame,Web中写动画的另一种选择
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- requestAnimationFrame与setInterval,setTimeout
自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...
- HTML5探秘:用requestAnimationFrame优化Web动画
本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画
- 使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
- 使用requestAnimationFrame做动画效果一
最近学习了requestAnimationFrame,看了张鑫旭直白易懂,但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3 ...
随机推荐
- 数据存储之归档解档 NSKeyedArchiver NSKeyedUnarchiver
在构建应用程序时,有一个重要的问题是如何在每次启动之间持久化数据,以便重现最后一次关闭应用前的状态.在iOS和OS X上,苹果提供了三种选择:Core Data.属性列表(Property List) ...
- JavaScript变量类型检测总结
JavaScript中的变量类型: 基本类型值:Undefined,Null,Boolean,Number和String. 按值访问(可直接操作保存在变量中的变量值): 复制规则:当复制基本类型值时: ...
- zabbix3.0通过yum安装笔记
zabbix3.0通过yum安装笔记 一.通过yum安装zabbix rpm -Uvh https://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabbix- ...
- MySQL->AUTO_INCREMENT[20180516]
MySQL表格中自增长主键AUTO_INCREMENT使用,实现序列的最简单的方式 创建一个AUTO_INCREMENT自增的表 mysql> create table seq_test( ...
- 追溯了解Ubuntu之------基本命令操作(叁)
在使用Ubuntu中的一些基本命令与Linux中是有区别的: 1. 查看Ubuntu系统位数:uname -ar 或 getconf LONG_BIT 2. 获取Ubu ...
- 浅谈es5和es6中的继承
首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...
- HTML5--Table
1.先给大加看下效果图,有点干劲 2.编写的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 课时17.WebStorm安装(理解)
开发工具(工欲善其事,必先利其器) 为了让大家更快的融入到编程的世界中去,不被繁琐的英文单词所困扰,不用每天编写很多没有意义的重复代码,提升大家的开发效率,今后的课程中我们统一采用开发工具来编写网页 ...
- Flume(2)-拓扑结构与Agent内部原理
一. 拓扑结构 1. 串行模式 这种模式是将多个flume给顺序连接起来了,从最初的source开始到最终sink传送的目的存储系统.此模式不建议桥接过多的flume数量, flume数量过多不仅会影 ...
- Home Assistant系列 -- 接入手机摄像头做实时监控和人脸识别
准备一部废旧(土豪忽略,主要是穷)的.摄像头还是好的手机做监控设备,(Android 和iPhone都行)当Home Assistant 获得实时的视频流后,可以接入各种图像处理组件完成人脸识别,动作 ...