我的第一篇博客:requestAnimationFrame学习笔记
通常,我们在浏览器中写动画会用到哪些技术呢?
flash
可以实现一些非常复杂的动画,但随着HTML5的成熟,个人感觉flash终究会成为明日黄花。
css3
当前大部分现代浏览器已经对css3支持的很好了。通过transform实现2D/3D转换,通过transition实现元素过渡效果,使用animation与keyframes搭配实现复杂动画。而且用css3写动画还有个优点就是不会报错,我们写脚本的时候常常会出现语法错误,但css不会,大不了浏览器不认识规则不起作用呗(PS:有需要支持ie6等古董级浏览器的同学,使用HTML5和CSS3的新属性时,可以去这个网站 http://caniuse.com/ 查一查你要用的新特性在各主流浏览器及浏览器各版本中的支持情况,可以提高工作效率哦)
js定时器setTimeout/setInterval
可以通过设置定时器通过循环来使html元素动起来~这个大家都会用滴
但,今天要出场的是HTML5的requestAnimationFrame。
第一感觉,名字好长,翻译过来貌似就是“请求动画帧”。它有什么优点呢?HTML5推出这个API主要是为了优化动画性能的。
怎么说呢,fps(画面每秒传输帧数)对于很多显示器都是60,对应显示频率就是16.7ms/次。所以设置定时器时如果时间间隔低于这个数值,某些帧是无法绘制的,就会造成所谓“过渡绘制”了,可能还会影响应用的性能。而requestAnimationFrame跟着浏览器的绘制间隔走,不会过渡绘制,资源高效利用,自然流畅~各大浏览器支持也比较好(详见:http://caniuse.com/#search=requestanimationframe)
多说无益,上代码看看吧:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>An Example:requestAnimationFrame&canvas</title>
<style type="text/css">
html{
background: #000;
}
</style>
</head>
<body>
<script>
(function(){
window.requestAnimationFrame= //兼容处理
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback,element){
window.setTimeout(callback,1000/60);
};
var canvas,context,toggle;
init();
animate(); function init(){
canvas=document.createElement("canvas");
canvas.width=512;
canvas.height=512;
context=canvas.getContext("2d");
document.body.appendChild(canvas);
}
function animate(){
requestAnimationFrame(animate); //requestAnimationFrame需要递归调用才能实现连续的动画
draw();
}
function draw(){
var time=new Date().getTime()*0.002;
var x=Math.sin(time)*192+256;
var y=Math.cos(time*0.9)*192+256;
toggle=!toggle; context.fillStyle=toggle?'rgb(200,200,20)':'rgb(20,20,200)';
context.beginPath();
context.arc(x,y,10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
})();
</script>
</body>
</html>
这个例子还涉及到canvas画图,顺便把canvas api也给巩固一下,嘻嘻
reference:
http://www.webhek.com/requestanimationframe/
http://www.zhangxinxu.com/wordpress/tag/requestanimationframe/
最新文章
- ABP教程-给项目添加SwaggerUI,生成动态webapi
- mysql索引失效
- jQuery实现滚动效果详解1
- C# ASP.NET基类,常用类库及源代码
- AFNetworking 2.0 使用
- Source Insight 安装使用
- mysql 树形数据,层级数据Managing Hierarchical Data in MySQL
- html--鼠标控制DIV移动
- Java程序执行Linux命令
- Eclipse:引用一个项目作为库(图文教程)
- JS算法之快排&;冒泡
- python发送post请求
- Java中数组定义的三种方式
- vue $refs的基本用法
- Yii2 rules验证规则大全
- java - 并发编程易错实例
- 第18月第20天 tensorflow安装
- XLua访问C#中的List或者数组
- Oracle SQL之 序列使用限制
- 【软工实践】第四次作业--爬虫结合WordCount
热门文章
- SecureCRT 实用配置
- rman进行备份、恢复
- PowerShell自定义对象
- Android应用源码图书馆管理系统带服务端数据库
- [Javascript] MetaProgramming: new.target
- 【PHP分享】Windows tail工具分享
- mysql的优化措施,从sql优化做起
- 不一样的风格,C#的lambda表达式
- linux中的帮助命令 分类: linux 学习笔记 ubuntu 2015-07-05 19:07 31人阅读 评论(0) 收藏
- Linux下搭建Oracle11g RAC(4)----配置oracle,grid用户SSH对等性