JavaScript基于时间的动画算法

前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现,有些手机的动画会“快”一点,有些手机的动画会“慢”一点,有些慢得还不是一两点。

通过查找资料发现,基于帧的算法(Frame-based)来实现动画会导致不同帧率的平台体验不一致,而基于时间(Time-based)的动画算法可以很好地改良这种情况,让不同帧率的情况下都能达到较为统一的速度上的体验。

本文介绍的就是基于帧动画算法和基于时间动画算法的差异,以及对基于时间算法的改良。

基于帧的动画算法(Frame-based)


相信做过前端的人对使用JavaScript实现动画的原理都很熟悉。现在让你实现一个让一个div从左到右来回移动的JS代码,你可能嗖嗖就写出来了:

function moveDiv(div, fps) { var left = 0; var param = 1; function loop () { update(); draw(); } function update() { left += param * 2; if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } } function draw() { div.style.left = left + "px"; } setInterval(loop, 1000 / fps); } moveDiv(document.getElementById("div1"), 60);

效果如下:

http://jsfiddle.net/livoras/4taf9hhs/embedded/result,js,html,css/ src=“https://jsfiddle.net/livoras/4taf9hhs/embedded/result,js,html,css/” allowfullscreen=“allowfullscreen” frameborder=“0” class=“loading” style=“box-sizing: border-box; width: 825px; height: 300px; background: url(”…/img/loader.gif") 50% center no-repeat rgb(250, 250, 250);">

看看代码,我们让一个div在0 ~ 300px区间内左右来回移动。update计算更新描绘div的位置,draw重新描绘页面上的div。为了方便起见,这里直接使用setInterval作为定时器,实际情况下可以采用你喜欢的setTimeout或者requestAnimationFrame。这里设置每秒钟到更新60次,60fps是人尽皆知的比较适合做动画的帧率。

地球人都知道,JavaScript中的定时器是不准确的。由于JavaScript运行时需要耗费时间,而JavaScript又是单线程的,所以如果一个定时器如果比较耗时的话,是会阻塞下一个定时器的执行。所以即使你这里设置了1000 / 60每秒60帧的帧率,在不同的浏览器平台的差异也会导致实际上你的没有60fps的帧率。

所以上面代码在一个手机上执行的时候可能有60fps的帧率,在另外一个手机上可能就只有30fps,更甚可能只有10fps。

我们模拟一下这种情况会有什么效果发生:

http://jsfiddle.net/livoras/Lcv1jm53/embedded/result,js,html,css/ src=“https://jsfiddle.net/livoras/Lcv1jm53/embedded/result,js,html,css/” allowfullscreen=“allowfullscreen” frameborder=“0” class=“loading” style=“box-sizing: border-box; width: 825px; height: 300px; background: url(”…/img/loader.gif") 50% center no-repeat rgb(250, 250, 250);">

这完全不对大头!

可以看到三个方块移动速度根本不在同一个channel上。想象一下一个超级马里奥游戏在10fps的情况会怎么样?按跳跃一下,你会看到马里奥以一种太空漫游的姿态在空中抛弧线。

导致这种情况的原因很简单,因为我们计算和绘制每个div位置的时候是在每帧更新,每帧移动2px。在60fps的情况下,我们1秒钟会执行60帧,所以小块每秒钟会移动60 * 2 = 120px;如果是30fps,小块每秒就移动30 * 2 = 60px,以此类推10fps就是每秒移动20px。

三个小块在单位时间内移动的距离不一样!

假如你现在要做一个超级马里奥的游戏,怎么做到可以在不同帧率的情况下让马里奥看起来还是那么迅速且帅气?

解决方案很明显。虽然不同的浏览器平台上的运行差异可能会导致帧率的不一致,但是有一样东西是在任何平台上都一致的,那就是时间。所以我们可以改良我们的算法,不是以帧为基准来更新方块的位置,而是以时间为单位更新。也就是说,我们之前是px/frame,现在换成px/ms

这就是接下来要说的基于时间(Time-based)的动画算法。

基于时间的动画算法(Time-based)


其实思路和实现都很简单。我们计算每一帧离上一帧过去了多少时间,然后根据过去的时间来更新方块的位置。

例如,上面的方块应该每秒钟移动120px,每毫秒移动120 / 1000 = 0.12像素(12px/ms)。如果上一帧方块的位置在left为10px的位置,到了这一帧的时候,假设相对于上一帧来说时间过去了200ms,那在时间上来说在这一帧方块应该移动200ms * 0.12px/ms = 240px。最终位置应该为10 + 240 = 250px。其实就是left = left + detalTime * speed。代码如下:

function moveDivTimeBased(div, fps) { var left = 0; var current = +new Date; var previous = +new Date; var param = 1; function loop() { var current = +new Date; var dt = current - previous; // 计算时间差 previous = current; update(dt); draw() } function update(dt) { left += param * (dt * 0.12); // 根据时间差更新位置 if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } } function draw() { div.style.left = left + "px"; } setInterval(loop, 1000 / fps); }

看看效果如何:

http://jsfiddle.net/livoras/8da1nssL/embedded/result,js,html,css/

看起来比上面的好多了,30fps和10fps好像能勉强赶上60fps的步伐。但是时间久了会发现30fps和10fps越来越落后于60fps。(建议先刷新再看看效果会更加明显)

这是因为每次小方块碰到边缘的时候,都会损失掉一部分时间,而且帧率越低的损失越大。看看我们上面的update函数:

function update(dt) { left += param * (dt * 0.12); // 根据时间差更新位置 if (left > 300) { left = 300; param = -1; } else if (left < 0) { left = 0; param = 1; } }

假如我们现在方块的位置在left为290px的位置,这一帧传入的dt为100ms,那么我们left为290 + 100 * 0.12 = 302,但是302大于300,所以left会被设置为300。那么本来用来移动2px的时间就会白白被“抛弃”掉。dt越大,浪费得越多,所以30fps和10fps会比60fps越来越慢。

为了解决这个问题,我们对已有的算法进行改良。

改良基于时间的动画算法


解决思路如下:不一次算整块的时间(dt)移动的距离,而是把dt分成固定的时间片,通过多次update固定的时间片来计算dt时间后应该到什么位置。

比较抽象,我们直接看代码:

function moveDivTimeBasedImprove(div, fps) { var left = 0; var current = +new Date; var previous = +new Date; var dt = 1000 / 60; var acc = 0; var param = 1; function loop() { var current = +new Date; var passed = current - previous; previous = current; acc += passed; // 累积过去的时间 while(acc >= dt) { // 当时间大于我们的固定的时间片的时候可以进行更新 update(dt); // 分片更新时间 acc -= dt; } draw(); } // update 和 draw 函数不变 setInterval(loop, 1000 / fps); }

我们先确定一个固定更新的时间片,如固定为60fps时一帧的时间:1000 / 60 = 0.167ms。然后积累过去的时间,然后根据固定时间片分片进行更新。也就说,即使这一帧和上一帧相差过去了100ms,我也会把这100ms分成很多个0.167ms来执行update函数。这样做有两个好处:

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

html5

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/31253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多模态大模型时代下的文档图像智能分析与处理

0. 前言 随着人工智能技术的不断发展&#xff0c;尤其是深度学习技术的广泛应用&#xff0c;多模态数据处理和大模型训练已成为当下研究的热点之一&#xff0c;这些技术也为文档图像智能处理和分析领域带来了新的发展机遇。 多模态大模型时代下的文档图像智能分析与处理的研究…

Java中的数据结构:选择与优化

Java中的数据结构&#xff1a;选择与优化 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;选择合适的数据结构对程序性能和可维护性至…

MySQL UPDATE和DELETE语句的 IN/EXISTS 子查询限制

The MySQL query optimizer has different strategies available to evaluate subqueries: 1、 For a subquery used with an IN, ANY, or EXISTS predicate, the optimizer has these choices: • Semijoin • Materialization • EXISTS strategy 2、 For a subquery used …

Linux:用户账号和权限管理的命令

目录 一、Linux用户的分类和组的分类 1.1、用户账号和组账号 1.2、用户的分类 1.3、组账号 1.4、用户账号文件/etc/passwd 二、用户管理相关命令 2.1、chage命令&#xff1a;用来修改帐号和密码的有效期限&#xff0c;针对目前系统已经存在的用户 2.2、useradd&#xf…

【Numpy】一文向您详细介绍 np.abs()

【Numpy】一文向您详细介绍 np.abs() 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&#xff0c;曾…

数据结构-图的基本概念

图的定义 图时由非空的顶点集合和一个描述顶点之间关系的集合组成。可以定义为&#xff1a; ​​​​​​​ ​​​​​​​ ​​​​​​​ G表示一个图&#xff0c;V表示点集&#xff0c;E表示边集。集合E的每一个二元组都包含两个值和&#xff0c;表示…

什么是联盟营销?独立站如何通过联盟营销提高转化率?

什么是联盟营销&#xff1f;独立站如何通过联盟营销提高转化率&#xff1f; 流量紧缺是跨境电商独立站永恒不变的难题&#xff0c;对于独立站卖家来说&#xff0c;广告投放、KOL引流等推广方式都能带来流量&#xff0c;但在广告流量越来越贵的今天&#xff0c;对于跨境电商独立…

Vue快速上手和Vue指令

一、Vue快速上手 1、Vue概念 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套构建用户界面的渐进式框架 Vue2官网&#xff1a;https://v2.cn.vuejs.org/ 构建用户界面&#xff1a;基于数据渲染出用户可以看到的界面 渐进式&#xff1a; 循序渐进&#xff0c;不一定非得把…

前端 响应式设计之媒体查询

媒体查询&#xff08;Media Queries&#xff09;是用于在网页设计中根据用户设备的特征&#xff08;如屏幕宽度、高度、设备类型等&#xff09;来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式&#xff0c;以提供更好的用户体验。 媒体…

阿里云PAI主机网页访问测试

笔者使用的阿里云平台PAI主机(首次使用免费三个月额度)&#xff0c;由于其默认不设置公网IP&#xff0c;所以在该主机上启动HTTP服务后无法访问测试。 这里使用ssh来作隧道穿透&#xff0c;首先需要配置ssh。 云主机配置ssh 1. 修改root账号密码 在云主机上执行 passwd ro…

安当透明加密(TDE)助力企业建立可信赖的数据环境

​​​​​​​ 透明加密是一种特殊的加密方法&#xff0c;它允许数据在存储或传输过程中自动进行加密和解密&#xff0c;而用户并不需要知道加密过程。这种技术对用户来说是“透明的”&#xff0c;因为它不会改变用户的日常操作习惯&#xff0c;加密和解密过程在后台自动进行…

怎么学习PMP才是最正确的?

每个人的学习方式各不相同&#xff0c;不能一概而论说某种学习方式就是错误的。学习方式并没有绝对的对错之分&#xff0c;只能说是否适合自己&#xff0c;是否能够达到预期的学习效果。并不是别人的学习方式就一定适合自己&#xff0c;也不是不适合自己的学习方式就一定是错误…

【ARMv8/v9 GIC 系列 4 -- GIC 中断分类 SGI | PPI | SPI 及中断检测流程】

文章目录 GIC 中断分类SGI&#xff08;Software Generated Interrupts&#xff09;PPI&#xff08;Per-Processor Interrupts&#xff09;SPI&#xff08;Shared Peripheral Interrupts&#xff09; 中断检测流程物理中断生命周期SPI 中断检测流程PPI 和SGI中断检测流程LPI中断…

分布式数据库的原理

分布式数据库 分布式数据库是将数据存储在多台独立计算机上&#xff0c;这些计算机通过网络连接协同工作的系统。其原理在于将数据分散到多个节点&#xff0c;以提高可用性、可扩展性和容错性。 CAP定理 CAP定理&#xff08;Consistency, Availability, Partition Tolerance…

Centos SFTP搭建

SFTP配置、连接及挂载教程_sftp连接-CSDN博客1、确认是否安装yum list installed | grep openssh-server 2、创建用户和组 sudo groupadd tksftpgroup sudo useradd -g tksftpgroup -d /home/www/tk_data -s /sbin/nologin tksftp01 sudo passwd tksftp013. 配置SFTP注意&a…

在Elasticsearch中添加字段

当使用Elasticsearch&#xff08;ES&#xff09;添加字段时&#xff0c;通常会涉及到更新已有索引的映射&#xff08;mapping&#xff09;&#xff0c;以确保新字段能够被正确地索引和搜索。下面是如何通过ES的API来更新索引映射并添加一个新字段的详细步骤&#xff1a; 1. 确认…

Unet已死,Transformer当立!详细解读基于DiT的开源视频生成大模型EasyAnimate

Diffusion Models视频生成-博客汇总 前言&#xff1a;最近阿里云PIA团队开源了基于Diffusion Transformer结构的视频生成模型EasyAnimate&#xff0c;并且提出了专门针对视频的slice VAE&#xff0c;对于目前基于Unet结构的视频生成最好如SVD形成了降维打击&#xff0c;不论是生…

Apifox 快速入门教程

访问示例项目​ 可访问Apifox官网&#xff0c;下载并打开 Apifox 后&#xff0c;你将会看到由系统自动创建的“示例团队”&#xff0c;其中内含一个“示例项目”。 项目中自动生成了与宠物商店有关的数条接口。 手动新建接口​ 新建接口是开发者们最常用的功能之一。Apifox 能…

提升运营设计水平的8个关键技巧

运营设计是建立更强大的设计团队&#xff0c;支持个人、流程和工具的协调&#xff0c;大规模扩大创造力和影响力的一种以人为本的方法。设计和操作通过敏捷和迭代的方法完全改变了开发过程&#xff0c;允许组织跨团队快速扩展和迭代设计过程。一个庞大的运营设计团队应该如何协…

斜堆(数据结构篇)

数据结构之斜堆 斜堆 概念&#xff1a; 斜堆是左式堆的自调节形式&#xff0c;斜堆和左式堆间的关系类似于伸展树和AVL树间的关系斜堆是具有堆序性的二叉树&#xff0c;但是不存在对树的结构限制不同于左式堆&#xff0c;关于任意节点的零路径长的任何信息都不保留&#xff…