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
*/
时间: 2024-11-11 01:33:58

javascript动画中的“帧”的相关文章

让蔡徐坤来教你实现游戏中的帧动画(下)

拖了将近一个月,终于把帧动画这部分写完了,新关注的或者已经忘记的小伙伴可以看一下之前写的部分: 让蔡徐坤来教你实现游戏中的帧动画(上) 让蔡徐坤来教你实现游戏中的帧动画(中) ? 今天这个还是在上一篇的基础上进行修改的,主要讲解的如何在帧动画中添加事件,Cocos Creator 提供了两种添加事件的方式:可视化编辑帧事件和动态注册帧事件,下面将对这两种方式分别介绍. 没看过官方文档的小伙伴建议先熟悉一下官方文档哦! https://docs.cocos.com/creator/manual/z

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

我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1.我们希望这段帧动画只循环播放所指定的次数. 2.我们希望帧动画结束的瞬间执行某种操作.这个在游戏中大量存在. 3.我们想自如的控制播放的速度. 4.我们想尽可能让这个帧动画的实现方式兼容大部分浏览器,在移动和pc端都能运行良好. 有了以上四点要求,那就不是gif图片所能完成的了.下面,我们先探讨有

Android中的帧动画的简单使用

Android中动画主要有下面几种,帧动画(frame),补间动画(tween),属性动画(property) 我们平时项目中主要用的是帧动画和补间动画 帧动画需要我们准备一组静态图片,这些图片是通过分解动画得来的,静态图片连起来播放形成动画效果 我们在res目录下新建一个drawable目录,用来存放动画资源和xml文件 图片如下: girl.xml 注意android:oneshot="false|true" 该属性控制动画是否重复播放,false代表重复播放 <?xml v

关于动画中帧的解释

帧:就是影像动画中最小单位的单幅影像画面,相当于电影胶片上的每一格镜头. 一帧就是一副静止的画面,连续的帧就形成动画,如电视图象等. 我们通常说帧数,简单地说,就是在1秒钟时间里传输的图片的帧数,也可以理解为图形处理器每秒钟能够刷新几次,通常用fps(Frames Per Second)表示.每一帧都是静止的图象,快速连续地显示帧便形成了运动的假象.高的帧率可以得到更流畅.更逼真的动画.每秒钟帧数 (fps) 愈多,所显示的动作就会愈流畅. 关键帧——任何动画要表现运动或变化,至少前后要给出两个

JavaScript动画知多少?

今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果.一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的.程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死. 执行一个动画函数对于浏览器来说是个苦差,设置

RequestAnimationFrame更好的实现Javascript动画

一直以来,JavaScript的动画都是通过定时器和间隔来实现的.虽然使用CSS transitions 和 animations使Web开发实现动画更加方便,但多年来以JavaScript为基础来实现动画却很少有所改变.直到Firefox 4的发布,才带来了第一种对JavaScript动画的改善的方法.但要充分认识改善,这有利于帮助我们了解web动画是如何演变改进的. 定时器Timer 用于创建动画的第一个模式是使用链式setTimeout()调用.在Netscape 3′s hayday的很

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本

原文:JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本 一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页面大概内容是什么. 效果图: 2.实现这个效果的思路 (1)把主页的几个链接的背景图片缩放到150px*150px,拼成一张750*150的图片,并保存为slideshow.png,存放到ima

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

× 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容性问题,以及功能实现的方式,用的不是很广泛.javascript动画广泛使用的还是模拟拖拽.本文将详细介绍该内容 原理介绍 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的