通常,我们在浏览器中写动画会用到哪些技术呢?

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&amp;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/

我的第一篇博客:requestAnimationFrame学习笔记的更多相关文章

  1. 我的第一篇博客----LCS学习笔记

    LCS引论 在这篇博文中,博主要给大家讲一个算法----最长公共子序列(LCS)算法.我最初接触这个算法是在高中学信息学竞赛的时候.那时候花了好长时间理解这个算法.老师经常说,这种算法是母算法,即从这 ...

  2. 第一篇博客:Hello World

    2016年10月10日,双十,好日子,决定开始写第一篇博客,标题想了会,就叫Hello World 吧,哈哈^_^. 首先感谢博客园的管理们能批准我的申请,记得在14年的时候申请过一次,竟然没申请通过 ...

  3. 我的第一篇博客 ——【ToDoList】小程序开发

    我是一只即将大四的大三狗,这是我的第一篇博客,说来惭愧.今年1月份,学校放寒假的时候开始自学的IOS,放假的时候比较起劲,看了一堆Object-C的视频,然后照着中英文对照的IOS基础开发教程,做了两 ...

  4. Hello World -- 第一篇博客

    今年注定是不寻常的一年,因为技术,接触了许多大牛.通过一篇篇博文,看到了大牛们勤奋好学.孜孜不倦的精神,于是决定也开个博客,向大牛学习. 博客开了,写点什么呢?奈何肚子里墨水不多,吐出来也多是白沫,不 ...

  5. “Hello, my first blog”------第一篇博客的仪式感

    本人在校大学生一枚,开通博客,主要是想记录自己的学习过程,分享自己的学习经历.记得大一的时候,很多不懂的操作和知识,都是在博客上找到了相应的解决办法.但比较讽刺的是,很多时候,曾经解决了的问题,当再次 ...

  6. C博客作业00—我的第一篇博客

    C博客作业00-我的第一篇博客 1. 你对网络专业或者计算机专业了解是怎样? 泛泛了解 - 原先只知道网络工程隶属于计算机工程学院,与院中其他专业一样,同样都需要学习大量的计算机基础知识,然后再分支学 ...

  7. Hello World -- 第一篇博客 -- 活着的意义

    今年注定是不寻常的一年,因为技术,接触了许多大牛.通过一篇篇博文,看到了大牛们勤奋好学.孜孜不倦的精神,于是决定也开个博客,向大牛学习. 博客开了,写点什么呢?奈何肚子里墨水不多,吐出来也多是白沫,不 ...

  8. Youcans 的第一篇博客

    这是我的第一篇博客. 今后我会将我的学习心得和总结在这里发布,与大家共享,共勉.

  9. 我的第一篇博客blog,笑哭

    我的第一篇博客blog Markdown学习 一级标题:#加一个空格 加 文字, 二级标题:加2个##以此类推 字体 粗体:hello world!字体前有二个星号,字体后有二个星号 斜体:hello ...

  10. 第一篇博客:HTML:background的使用

    开篇 我是一名程序员小白,这是我写的第一篇博客,在学习的路上难免会遇到难以解决的问题,我将会在这里写下我遇到的问题并附上解决方法 希望可以对各位有所帮助!! 我们在html中经常会遇到这样的问题 例如 ...

随机推荐

  1. asp.net将本地Excel上传到服务器并把数据导入到数据库

    前台代码: <td class="formLabel"> 批量修改: </td> <td class="formInput"> ...

  2. MINA学习之体系介绍

    基于MINA应用程序结构图: 我们可以看出,MINA是应用程序(客户端或服务端)和底层基于TCP,UDP等通讯协议的网络层之间的粘合剂.而且各个模块之间是相互独立的,你只需要在MINA体 系基础上设计 ...

  3. How to easily concatenate text based on criteria in Excel? 如何将Excel中的文本按条件合并

    To combine text with the unique ID numbers, you can extract the unique values first and then create ...

  4. 黑马程序猿——Java中的类载入器

    ------- android培训.java培训.期待与您交流! -------- 类载入器 Java虚拟机中能够安装多个类载入器,系统默认三个主要类载入器,每一个类负责载入特定位置的类: BootS ...

  5. ZooKeeper监控

    http://jm-blog.aliapp.com/?p=1450 在公司内部,有不少应用已经强依赖zookeeper,zookeeper的工作状态直接影响它们的正常工作.目前开源世界中暂没有一个比较 ...

  6. [TypeScript] Installing TypeScript and Running the TypeScript Compiler (tsc)

    This lesson shows you how to install TypeScript and run the TypeScript compiler against a .ts file f ...

  7. Flume NG中的ElasticSearch Sink

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  8. DS_Store

    .DS_Store (英文全称 Desktop Services Store)[1] 是一种由苹果公司的Mac OS X操作系统所创造的隐藏文件,目的在于存贮文件夹的自定义属性,例如文件们的图标位置或 ...

  9. Android开发之UI更新交互机制与实例解析

    android开发过程中,经常需要更新UI的状态和文案等.这是就需要对UI进行 更新.在android中更新UI一般有三种方法,handler机制.RunOnUiThread方法以及AsyncTask ...

  10. 能发送http请求(get,post)的工具

    能发送http请求(get,post)的工具, 1.  fiddler 前端自己模拟发送请求 2.  其他 链接:https://www.zhihu.com/question/20367546/ans ...