javascript动画中的“帧”
在写游戏的时候,动画移动的速度需要保持一致,为了在各个软硬件环境中速度的一致,需要考虑帧频的不同。
计算时间系数:

时间系数 = 目标FPS / 实际FPS
计算实际FPS
actualFPS = 1000 / (endTime - startTime)
代码逻辑执行前计算开始的时间,执行完代码逻辑后的时间(结束时间)


创建一个timeInfo对象,接收一个参数goalFPS(想要达到的目标FPS),如果达不到,将调整移动速度使其看起来达到了goalFPS。
/**
* elapsed //经过的时间
* coeff //时间系数
* FPS //实际FPS
* averageFPS //平均FPS
**/
var timeInfo = function (goalFPS) {
var oldTime, paused = true, iterCount = 0, totalFPS = 0;
return {
getInfo: function () {
if(paused === true) {
paused = false;
oldTime = +new Date();
return {elapsed:0, coeff:0, FPS:0, averageFPS:0 };
}
var newTime = +new Date();
var elapsed = newTime - oldTime;
var FPS = 1000/elapsed;
oldTime = newTime;
iterCount ++;
totalFPS += FPS;
return {
elapsed: elapsed,
coeff: goalFPS / FPS,
FPS: FPS,
averageFPS: totalFPS / iterCount
};
},
pause: function() {paused = true;}
};
}; //use
/*
var timer = timeInfo(40);
//... animate start setTimeout setInterval
var timeData = timer.getInfo(),
elapsed = timeData.elapsed,
Coefficient = timeData.coeff,
FPS = timeData.FPS,
averageFPS = timeData.averageFPS;
//... animate end
*/
javascript动画中的“帧”的更多相关文章
- 使用javascript和css模拟帧动画的几种方法浅析
我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...
- 让 CXK 来教你实现游戏中的帧动画(上)
一款游戏除了基本功能之外,还需要给玩家更多视觉上的刺激,这个时候就需要用特效来装饰.本文就将介绍 Cocos Creator 的动画系统,除了标准的位移.旋转.缩放动画和序列帧动画以外,这套动画系统还 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- JavaScript动画知多少?
今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...
- RequestAnimationFrame更好的实现Javascript动画
一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实 ...
- JavaScript游戏中的面向对象的设计
简介: 从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句.在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计.本文将概述原 ...
- javascript动画系列第一篇——模拟拖拽
× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...
- Javascript动画效果(三)
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果(一)
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
随机推荐
- mysql相关日志汇总
日志作为重要的查询问题的手段.所以尽量记录上自己须要的日志.以供自己查询一些问题. MySQL有下面几种日志: 错误日志: -log-err 查询日志: -log 慢查询日志: -log-slow-q ...
- www.centos.org
https://www.centos.org/forums/viewtopic.php?t=5770 In order to conserve the limited bandwidth availa ...
- 开源语法分析器--ANTLR
序言 有的时候,我还真是怀疑过上本科时候学的那些原理课究竟是不是在浪费时间.比方学完操作系统原理之后我们并不能自己动手实现一个操作系统:学完数据库原理我们也不能弄出个像样的DBMS出来:相同,学完 ...
- HDU 3304 Interesting Yang Yui Triangle lucas定理
输入p n 求杨辉三角的第n+1行不能被p整除的数有多少个 Lucas定理: A.B是非负整数,p是质数.AB写成p进制:A=a[n]a[n-1]...a[0],B=b[n]b[n-1]...b[0] ...
- HDU 3830 Checkers
意甲冠军: 有三件 所有其他棋子可以跳 不能分开的两个跳跃 当被问及状态u为了国家v最低短跳转 思路: 对于一个状态三个棋子的位置能够设为 x y z (小到大) 仅仅有当y-x=z-y的时候 ...
- OpenCV 编程简单介绍(矩阵/图像/视频的基本读写操作)
PS. 因为csdn博客文章长度有限制,本文有部分内容被截掉了.在OpenCV中文站点的wiki上有可读性更好.而且是完整的版本号,欢迎浏览. OpenCV Wiki :<OpenCV 编程简单 ...
- SQLserver2012 tcp/ip 1433port问题解决方法
非常多MSSQL安装完毕后,调用1433(默认port)是失败的,这边具体介绍下解决方法. 一..我们须要在电脑上开启telnet服务,定位问题须要.在cmd下使用telnet,假设报命令不存在说明没 ...
- cocos2d-x-3.0新建工程以及移植其他平台
本文来自:http://www.zaojiahua.com/cocos2d-x-3-0.html 有将近俩个礼拜没有研究cocos2dx了,博主最近刷了些ACM的水题,越做感觉越没意思,这哪是考编程啊 ...
- Spark1.0.0 属性配置
1:Spark1.0.0属性配置方式 Spark属性提供了大部分应用程序的控制项,而且能够单独为每一个应用程序进行配置. 在Spark1.0.0提供了3种方式的属性配置: Sp ...
- 改动EditPlus默认模板
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...