在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitionsanimations很方便的实现动画,这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题,然而随着用户体验的提高,我们制作的动画效果有了更高的要求,那么对于比较复杂的而且具有较高流畅性的动画效果,用以上的两种方法就有点捉襟见肘了。对于质量较高的动画效果的实现,我们又不想用falsh,那怎么办呢?为解决这个问题,浏览器提供了一个统一帧管理、提供监听帧的API,即requestAnimationFrame。我们今天就是利用requestAnimationFrame()函数来实现一个高质量旋转风车的动画效果。

查看预览下载附件

使用优势

一:假如同时进行的n个动画,函数会把原本需要n次reflow和repaint优化成1次,然后交给浏览器进行优化,这样就实现了高质量的动画效果。
二:如果浏览器的某个tab正在运行这样一个动画,然后你切到另一个tab,或者干脆最小化,总之就是你看不见它了,这时浏览器就会停止动画。这将意味着更少的CPU和更少的内存消耗。

使用方法

调用requestAnimationFrame函数,传递一个callback参数,则在下一个动画帧时,会调用callback

    //浏览器兼容处理
var requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})(); //如何使用
(function(){
render();
requestAnimationFrame(arguments.callee, element);
})();

requestAnimationFrame函数是webkit私有api,不过基本除了opera,现在各个最新的浏览器也都开始支持了,这是个很让人振奋的消息。另外在这里注意说明一下,requestAnimationFrame函数只是一个做动画的基础API,即不基于DOM元素的style变化,也不基于canvas,或者WebGL。所以,具体的动画细节需要我们自己写。更多的详细说明介绍请看:requestAnimationFrame for smart animating
好了,我们了解了requestAnimationFrame函数,那么我们接下来就学以致用,制作一个高质量旋转风车动画效果:

引入jQuery库:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

javascript代码:

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
} if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
}; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
} ()); // 自定义动画动作
var pinWheelArr36 = [ - 32, -302, -572, -841, -1112, -1381, -1651, -1921, -2191, -2461, -2732, -3002, -3272, -3542, -3812, -4082, -4352, -4621, -4891, -5161, -5431, -5702, -5972, -6242, -6512, -6782, -7053, -7322, -7592, -7861, -8132, -8402, -8672, -8941, -9211, -9482];
var pinWheel = $('#fengche') var pinCount = 0; var fps = 31; function spin() {
setTimeout(function() {
requestAnimationFrame(spin) if (pinCount > pinWheelArr36.length - 1) {
pinCount = 0;
};
pinWheel.css('background-position', pinWheelArr36[pinCount] + 'px top') pinCount++;
},
1000 / fps);
}; spin();

HTML代码:

<div style="background-position: -4621px top;" id="fengche"></div>

查看预览下载附件

其实学习了requestAnimationFrame函数,只要我们多加练习,运用到我们的项目中去,相信一定可以做出具有创意和高质量的动画效果。我也是刚刚接触到,如有错误的观点,请指出,非常感激。

requestAnimationFrame制作动画:旋转风车的更多相关文章

  1. html5 requestAnimationFrame制作动画:旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  2. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  3. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  4. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  5. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  6. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  7. JS:指定FPS帧频,requestAnimationFrame播放动画

    Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...

  8. Solidworks如何制作动画1

    1点击窗口下方的"运动算例1"可以弹出动画的面板,右击该"运动算例1"还可以对这个动画窗口重命名等操作. 2 我们从最简单的动画开始,假设图示装配体,想要把它从 ...

  9. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

随机推荐

  1. 如何用Node编写命令行工具

    0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...

  2. slick-pg v0.1.5 发布

    这个版本的更新主要是: 增加了对 json 的支持 (PostgreSQL 9.3 正式版已经发布了,所以我适时加入了对 pg json 的支持.功能其实前两个星期就已经开发测试好了,但公司跟联邦政府 ...

  3. 在C函数中保存状态:registry、reference和upvalues

    C函数可以通过堆栈来和Lua交换数据,但有时候C函数需要在函数体的作用域之外保存某些Lua数据,那么我们想到全局变量或static变量,这样做的缺点是:(1)为Lua设计C函数库时,导致不可重入:(2 ...

  4. Emgu学习之(二)——图像读取、显示、保存

    visual Studio Community 2015 工程和源代码:http://pan.baidu.com/s/1o6u5Fdw 内容 在这篇文章中将提到以下内容: 从文件中读取图像 Image ...

  5. ASP.NET MVC(二)

    休息一下还是继续ASP.NET MVC 的基础知识. 这篇文件我想和大家一起熟悉下ASP.NET MVC项目的目录结构及dll. 1. ASP.NET MVC 项目的目录结构 App_Data:  存 ...

  6. 乐在其中设计模式(C#) - 代理模式(Proxy Pattern)【转】

    介绍 为其他对象提供一个代理以控制对这个对象的访问. 示例 有一个Message实体类,某对象对它的操作有Insert()和Get()方法,用一个代理来控制对这个对象的访问. MessageModel ...

  7. GIT,VAGRANT及COREOS

    搞了COREOS才高大上啊. 测试DOCKER安装. 就是WIN下面GIT显得土豪..

  8. HDU_2057——64位无符号16进制数的运算

    Problem Description There must be many A + B problems in our HDOJ , now a new one is coming. Give yo ...

  9. CF #271 F Ant colony 树

    题目链接:http://codeforces.com/contest/474/problem/F 一个数组,每一次询问一个区间中有多少个数字可以整除其他所有区间内的数字. 能够整除其他所有数字的数一定 ...

  10. a标签嵌套解决方案

    在实际网页布局之中,我们有时候需要一整块点击区域中间还要有部分按钮点击,也就是需要a标签嵌套a标签,如下: <!-- a标签进行嵌套的时候 --><a href="#hao ...