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

  计算时间系数:

  

  时间系数 = 目标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动画中的“帧”的更多相关文章

  1. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  2. 让 CXK 来教你实现游戏中的帧动画(上)

    一款游戏除了基本功能之外,还需要给玩家更多视觉上的刺激,这个时候就需要用特效来装饰.本文就将介绍 Cocos Creator 的动画系统,除了标准的位移.旋转.缩放动画和序列帧动画以外,这套动画系统还 ...

  3. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  4. JavaScript动画知多少?

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval ...

  5. RequestAnimationFrame更好的实现Javascript动画

    一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实 ...

  6. JavaScript游戏中的面向对象的设计

    简介: 从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句.在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计.本文将概述原 ...

  7. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  8. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  9. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

随机推荐

  1. 【Swift】—— 中国课程

    Apple宣布更换oc武器语言 Swift ,在牛叉的中国开发者社区9几天之内,以完成.这是福音许多中国的开发商啊,兴奋的发现之后,写存储在日志,马上防止忘记: GitHub开源项目:<The ...

  2. WPF案例 (三) 模拟QQ“快速换装"界面

    原文:WPF案例 (三) 模拟QQ"快速换装"界面 这个小程序使用Wpf模拟QQ快速换装页面的动画特效,通过使用组合快捷键Ctrl+Left或Ctrl+Right,可实现Image ...

  3. python实现了字符串的按位异或和php中的strpad函数

    近期在写自己主动化測试,因为开发加密中用到strpad和字符串的按位异或,而python中没有这种函数和功能,所以必须自己写一套,要不自己主动化測试无法进行,所以就用python实现了一下,因为在写字 ...

  4. 【剑指offer】复制的复杂链条

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26154691 题目描写叙述: 输入一个复杂链表(每一个节点中有节点值,以及两个指针,一个指 ...

  5. Spring相框

    1.什么是Spring相框?Spring有哪些主要模块框架? Spring框架是一个为Java应用程序的开发提供了综合.广泛的基础性支持的Java平台. Spring帮助开发人员攻克了开发中基础性的问 ...

  6. C#-循环滚动字幕,timer,从左至右,从右至左,暂停---ShinePans

    Lable的Left属性是能够更改的,可是 Right属性不能够更改,所以我们能够利用 这个特点做自加 自减运算 using System; using System.Collections.Gene ...

  7. SlidingMenu开源项目滑动界面的实现总结

    先上图 须要准备的是先得在GitHub上下载ActionBarSherlock-master.zip,和SlidingMenu-master.zip这两个开源文件,然后解压这两个包,SlidingMe ...

  8. mysql5.1,5.5,5.6做partition时支持的函数

    mysql5.1支持的partition函数(http://dev.mysql.com/doc/refman/5.1/en/partitioning-limitations-functions.htm ...

  9. 彻底理解Javascript原型继承

    彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...

  10. SSH是什么?Linux如何修改SSH端口号?

    通过SSH连接可以远程管理Linux等设备,默认linuxssh端口是22端口,如何修改SSH默认端口,如何增加SSH端口呢?,下面小编给大家演示一下   工具/原料 Xshell   putty 等 ...