js动画实现(一)
requestAnimationFrame是什么?
在浏览器动画程序中,我们通常使用一个定时器来循环每隔几毫秒移动目标物体一次,来让它动起来。如今有一个好消息,浏览器开发商们决定:“嗨,为什么我们不在浏览器里提供这样一个API呢,这样一来我们可以为用户优化他们的动画。”所以,这个requestAnimationFrame()
函数就是针对动画效果的API,你可以把它用在DOM上的风格变化或画布动画或WebGL中。
使用requestAnimationFrame有什么好处?
浏览器可以优化并行的动画动作,更合理的重新排列动作序列,并把能够合并的动作放在一个渲染周期内完成,从而呈现出更流畅的动画效果。比如,通过requestAnimationFrame()
,JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外,如果在一个浏览器标签页里运行一个动画,当这个标签页不可见时,浏览器会暂停它,这会减少CPU,内存的压力,节省电池电量。
requestAnimationFrame的用法
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})(); // usage:
// instead of setInterval(render, 16) .... (function animloop(){
requestAnimFrame(animloop);
render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.
实现0到100的输出 requestAnimationFrame实现
(function(){
var i=0;
var timer=requestAnimationFrame(function fn() {
console.log(i++);
timer=requestAnimationFrame(fn);
if(i>100){
cancelAnimationFrame(timer);
}
}) }())
setTimeout实现
(function setTime(){
var i=0;
var timer = setTimeout(function fn() {
console.log(i++);
timer=setTimeout(fn,1000/60);
if(i>100){
clearTimeout(timer)
}
},1000/60)
}())
setInterval实现
(function() {
var i=0;
var timer = setInterval(function () {
console.log(i++);
if(i>100){
clearInterval(timer);
}
},1000/60) }())
js动画实现(一)的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- Centos 7 安装记录
0.安装中选择最小安装 1.centos7安装图形界面 之前转载过一篇“centos6安装图形界面”的文章,地址见http://my.oschina.net/u/1169607/blog/335304 ...
- elasticsearch不能使用root启动问题解决
问题: es安装好之后,使用root启动会报错:can not run elasticsearch as root [root@iZbp1bb2egi7w0ueys548pZ bin]# ./elas ...
- easyui的filebox过滤文件
示例:<input class="easyui-filebox" data-options="buttonText:'选择文件',accept:'image/gif ...
- jQuery outerHeight() 方法
outerHeight() 方法返回第一个匹配元素的外部高度. 如下面的图像所示,该方法包含 padding 和 border. 提示:如需包含 margin,请使用 outerHeight(true ...
- 【.net】Dictionary<TKey, TValue>源码分析
一图胜过千言万语~
- cesium随笔 — 简单实现获取三维范围(包括相机高度)
代码 // 获取当前三维范围 function getCurrentExtent() { // 范围对象 var extent = {}; // 得到当前三维场景 var scene = viewer ...
- Dapper.Contrib.Extensions问题
Dapper.Contrib.Extensions问题 Dapper.Extension.1.0.0.1\lib\net45\Dapper.Extension.dll Dapper.Contrib.1 ...
- iOS开发网络篇—GET请求和POST请求的说明与比较
1.GET请求和POST请求简单说明 1.1 创建GET请求 // 1.设置请求路径 NSString *urlStr = [NSString stringWithFormat:@"http ...
- 【Oracle 12c】最新CUUG OCP-071考试题库(57题)
57.(14-17) choose two: Examine the structure of the DEPARTMENTS table You execute the following comm ...
- LEFT JOIN条件写在where里是不会多查出数据来的
因为WHERE条件是对前面整个数据集进行查询,但如果条件放在ON里是会把在前表不在后表的数据查出来的