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 ...
随机推荐
- 基于S2SH开发病房管理系统的设计与实现 源码
基于S2SH开发病房管理系统的设计与实现: 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MySQL数据库 运行效果图: 此源码经 ...
- C# 中多态和重载的区别
一.多态性意味着有多重形式. 在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". using System; using System.Collections.Gene ...
- ASP.NET 页面执行顺序详解
今天整理了一下ASP执行过程,从.net页码的执行周期开始做一个详细的了解.我重写了页面的绝大多数方法.然后加载执行.所得的顺序如下. 方法是每个重写的事件中都输出一个字符,按字符打印出来的先后判断事 ...
- Java多线程编程:Callable、Future和FutureTask浅析(多线程编程之四)
java多线程-概念&创建启动&中断&守护线程&优先级&线程状态(多线程编程之一)java多线程同步以及线程间通信详解&消费者生产者模式&死锁& ...
- java学习笔记—Tomcat(9)
1 目录结构 bin 二进制目录,主要存储的是一些启动和停止服务器的命令startup.bat conf 配置目录,server.xml web.xml lib 服务器软件使用的第三方的j ...
- python获取aliyun ECS实例
#!/usr/bin/env python #-*- coding:utf-8 -*- # Description : get ecs from aliyun # Author : quke # Da ...
- Keil RTX使用 os_mut_init 报Hard Fault 错误解决记录
首先确定你的软件是在互斥信号初始化的位置,在以下几个位置,将会报Hard Fault 错误: (1).os_sys_init_user 用户线程创建之前 (2).os_tsk_create_user之 ...
- Solr7.4的学习与使用
学习的原因: 17年的时候有学习使用过lucene和solr,但是后来也遗忘了,最近公司有个项目需要使用到全文检索,正好也顺便跟着学习一下,使用的版本是Solr7.4的,下载地址:http://arc ...
- POJ 2192
#include <iostream> #include <string> #define MAXN 500 using namespace std; bool dp[MAXN ...
- SQL Server——存储过程(Stored Procedure)、事物、触发器
存储过程(proc 或 procedure) 存储过程(Stored Procedure),计算机用语,是一组为了完成特定功能的SQL语句集,是利用SQL Server所提供的Transact-SQL ...