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

  计算时间系数:

  

  时间系数 = 目标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. mysql登录报错 ERROR 1045 (28000)

    1.现象: [root@localhost ~]# mysql -u root -p Enter password:  ERROR 1045 (28000): Access denied for us ...

  2. Wix打包系列 (六)制作升级和补丁包

    原文:Wix打包系列 (六)制作升级和补丁包 前面我们已经知道怎么制作一个完整安装包了,但我们的软件往往不能一次性就满足客户的需要,当客户需要我们给软件进行升级的时候,我们应该怎么做呢? 在这之前,我 ...

  3. LNK1207: incompatible PDB format in********

    LNK1207: incompatible PDB format in******** VC中错误:LINK : fatal error LNK1207: incompatible PDB forma ...

  4. WebKit爬虫

    https://github.com/emyller/webkitcrawler 一个开源的项目,可以快速入门. http://spiderformysql.com/ http://crawl.gro ...

  5. Oracle单表的复杂查询

    Oracle单表的复杂查询 select avg(sal),max(sal),deptnofrom empgroupby deptno; orderby deptno; 查询工资高于500或者是岗位为 ...

  6. The Building Blocks-Enterprise Applications Part 2- Information Management and Business Analytics

    1. Business Analytic Applications Data Analytics Also referred to as 'Business Analytics' or 'Busine ...

  7. Smarty中模板eq相等 ne、neq不相等, gt大于, lt小于

    eq相等   ne.neq不相等,   gt大于, lt小于 gte.ge大于等于   lte.le 小于等于   not非   mod求模   is [not] div by是否能被某数整除   i ...

  8. 促销R语言应用性能

    1.       绩效评估 时间的确定 R测量时间是在最简单的方式提供是system.time性能. system.time(expr, gcFirst=TRUE) 这个函数会在不减少程序执行性能的情 ...

  9. 图解:Activity生命周期

    当用户需要对手机通过屏幕进行交互时,比如打一个电话,拍张照片,发送一个邮件,或者查看地图.开发者就需要实现一个活动(Activity).每个活动都将作为一个提供用户使用接口的窗口.它可以填满整个屏幕, ...

  10. 正則表達式 取出img标签 保存于指定路径

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...