关于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 ...
随机推荐
- Vue 源码分析——构造函数原型
在执行 npm run dev 的时候 根据script/config.js 文件中的配置 'web-full-dev': { entry: resolve('web/entry-runtime-wi ...
- 留言板(初学者使用js实现)
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- cmd命令操作Mysql数据库
在一次考试中,笔者因考试的电脑上没有安装操作Mysql数据库的可视化工具而不知如何操作数据库,所以在这里可以提醒各位掌握 命令行来操作数据库也是非常重要的. 笔者以惨痛的教训来警惕大家. 进入正题: ...
- Java调用WeChat's API总结
微信公众号结合着内置浏览器,有着普通浏览器无法完成的服务,前者可以获取浏览页面的微信用户的信息,从而根据信息为用户提供基于微信的更多服务:而后者仅仅能够浏览页面,通过用户的输入信息与用户互动. 本人根 ...
- solr 服务器搭建(Linux版)
1.下载访问linux工具 securcrt 链接:https://pan.baidu.com/s/1zTwzmnzUmnwbKUCNHCLN1g 密码:kpyg 2.下载所需的 jdk so ...
- 关于pythond在终端中运行
下载python并安装后,如果想要在终端中直接运行,我们需要配置环境变量. 在计算机右击选择属性,,选择高级属性,点击环境变量,,即可新建环境变量, ,然后可以在终端中运行python解释器.
- 编写Makefile规则
一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中,makefile定义了一系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作 ...
- MIPI调试经验(转载)
目录 一.D-PHY 1.传输模式 2.Lane States 3.Lane Levels 4.操作模式 5.时序要求 二.DSI 1.线路构成 2.两种接口的 LCD 3.数据包类型 4.从控制器到 ...
- Vim Go开发环境搭建
基本搭建流程参考了网上的博文以及Vimgo的Github主页 博文https://www.cnblogs.com/breg/p/5386365.html Vim-go主页(我能不能加入项目,做点贡献呢 ...
- 基于R实现k-means法与k-medoids法
k-means法与k-medoids法都是基于距离判别的聚类算法.本文将使用iris数据集,在R语言中实现k-means算法与k-medoids算法. k-means聚类 首先删去iris中的Spec ...