JS:指定FPS帧频,requestAnimationFrame播放动画
Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了。
实际运行时,不需要我们关心定时器的问题,flash player会定时触发EnterFrame消息,推动Movieclip播放。
在js这一侧,需要我们设定一个定时器,并推动相应的绘制逻辑执行。
最简单:
var FPS = 60;setInterval(draw, 1000/FPS);
这个简单做法,如果draw带有大量逻辑计算,导致计算时间超过帧等待时间时,将会出现丢帧。除外,如果FPS太高,超过了当时浏览器的重绘频率,将会造成计算浪费,例如浏览器实际才重绘2帧,但却计算了3帧,那么有1帧的计算就浪费了。
成熟做法:
引入requestAnimationFrame,这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。
这个函数类似setTimeout,只调用一次。
function draw() { requestAnimationFrame(draw); // ... Code for Drawing the Frame ... }
递归调用,就可以实现定时器。
但是,这样完全跟浏览器帧频同步了,无法自定义动画的帧频,是无法满足需求的。
接下来需要考虑如何控制帧频。
简单做法:
var fps = 30; function tick() {setTimeout(function() {requestAnimationFrame(tick);draw(); // ... Code for Drawing the Frame ...}, 1000 / fps); } tick();
这种做法,比较直观的可以发现,每一次setTimeout执行的时候,都还要再等到下一个requestAnimationFrame事件到达,累积下去会造成动画变慢。
自行控制时间跨度:
var fps = 30; var now; var then = Date.now(); var interval = 1000/fps; var delta;function tick() {requestAnimationFrame(tick);now = Date.now();delta = now - then;if (delta > interval) {// 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。then = now - (delta % interval);draw(); // ... Code for Drawing the Frame ...} } tick();
针对低版本浏览器再优化:
如果浏览器没有requestAnimationFrame函数,实际底层还只能用setTimeout模拟,上边做的都是无用功。那么可以再改进一下。
var fps = 30; var now; var then = Date.now(); var interval = 1000/fps; var delta; window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;function tick() {if(window.requestAnimationFrame){requestAnimationFrame(tick);now = Date.now();delta = now - then;if (delta > interval) {// 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。 then = now - (delta % interval);draw(); // ... Code for Drawing the Frame ... }}else{setTimeout(tick, interval); draw();} } tick();
最后,还可以加上暂停。
var fps = 30; var pause = false; var now; var then = Date.now(); var interval = 1000/fps; var delta; window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;function tick() {if(pause)return;if(window.requestAnimationFrame){...}else{...} } tick();
JS:指定FPS帧频,requestAnimationFrame播放动画相关推荐
- 指定FPS帧频,requestAnimationFrame播放动画
Flash制作动画,最基础的概念就是帧,但在Flash中,帧频的控制比较简单,只需要编译前指定一下目标帧频就可以了. 实际运行时,不需要我们关心定时器的问题,flash player会定时触发Ente ...
- JS得到浏览器每秒帧数fps 利用requestAnimationFrame
平日学习点滴 背景: 今天无意中发现一个方法 window.requestAnimationFrame Google之后,就完成了下面得到浏览器每秒帧数的方法. 使用: showFPS.go(); / ...
- Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲)
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
- JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器 概述 CANVAS绘制核心代码 播放器代码 使用页面HTML代码 使用页面JS代码 使用示例 概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
- cocosBuilder播放动画
Working with Animations 动画 You can use CocosBuilder for creating character animations, animating com ...
- Android PowerImageView实现,可以播放动画的强大ImageView
本文转载自:http://blog.csdn.net/guolin_blog/article/details/11100315 转载请注明出处:http://blog.csdn.net/guolin_ ...
- vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿 关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
- CSS 帧动画 播放动画
CSS3 帧动画 amimation @keyframes 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些 ...
- 用js来写一个478呼吸动画来做393的默想吧-用js来写一个478呼吸动画
title: 用js来写一个478呼吸动画来做393的默想吧 date: 2023-02-12 09:37:34.01 updated: 2023-02-23 17:38:15.804 url: ht ...
最新文章
- FortiGate SSH管理认证问题安全公告
- C# DirectX编程设置全屏和PresentParameters参数
- 输入十个学生的成绩,判断及格不及格人数,得到不及格人的学号
- P4169 [Violet]天使玩偶/SJY摆棋子(CDQ分治、暴力)
- pymc3 贝叶斯线性回归_使用PyMC3进行贝叶斯媒体混合建模,带来乐趣和收益
- 2020 年最新版 68 道Redis面试题,20000 字干货,赶紧收藏起来备用!
- 单链表遍历_单链表及其遍历实现的基本操作
- Codeforces 808G. Anthem of Berland
- sentinel3数据批量下载——sentinelsat
- 解读Depth Map Prediction from a Single Image using a Multi-Scale Deep Network (7)
- 网页设计_导航条_下拉菜单
- ttest函数使用方法_TTEST 函数 - EXCEL 2010 中文帮助文档
- PMI第七章 挣值分析
- 什么是mybatis,全是干货
- css定位“十字架“之水平垂直居中
- php 文章页面阅读全文,给WordPress文章内容页增加阅读全文展开功能
- css中盒子模型的布局
- java下载我的世界1.11_我的世界Java版1.11
- C语言晦涩难懂?别怕! 我来C
- 暗影精灵4适合计算机专业,暗影精灵4评测_暗影精灵4代怎么样|值得买吗-太平洋电脑网...