- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一种情况,我想在 1 秒内将 600px 宽的 div 的宽度设置为 0px。为此,我可以使用 requestAnimationFrame()
。但我真的不能 100% 确定动画是否需要 1 秒。
它看起来像这样:
let width = 600;
let animation;
function animateWidth(){
if(width <= 0){
window.cancelAnimationFrame();
}else{
width -= 10; // (600px/60fps)
}
document.getElementById('id1').setAttribute('width', width);
animation = window.requestAnimationFrame(animateWidth);
}
animation = window.requestAnimationFrame(animateWidth);
问题是,当设备具有不同的 fps 时,它会影响动画的持续时间(在 30 fps 时需要 2 秒,在 60 fps 时需要 1 秒)。我想确保动画的持续时间始终为一秒。如果 fps-rate 不同,我想根据持续时间更改宽度的新值(因此以 30 fps 设置动画我们将每步更改宽度 20 (600px/30fps))。
requestAnimationFrame
时实现这一点?如果我能得到帧之间的平均间隔或我认为可行的 fps。 文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
最佳答案
requestAnimationFrame
将页面加载后的时间传递给回调,例如
const startValue = 600;
const endValue = 0;
// return a value between start and end as l goes from 0 to 1
function lerp(start, end, l) {
return start + (end - start) * l;
}
const startTime = performance.now();
const durationInSeconds = 1;
const element = document.getElementById('id1');
function animateWidth(now) {
const timeSinceStartInSeconds = (now - startTime) * 0.001;
// l goes from 0 to 1 over durationInSeconds;
const l = Math.min(timeSinceStartInSeconds / durationInSeconds, 1);
element.setAttribute('width', lerp(startValue, endValue, l));
// if we haven't finished request another animation frame
if (l < 1) {
requestAnimationFrame(animateWidth);
}
}
requestAnimationFrame(animateWidth);
#id1 { background: red; }
<canvas id="id1"></canvas>
如果是我,我可能会尝试让它成为一个函数
// return a value between start and end as l goes from 0 to 1
function lerp(start, end, l) {
return start + (end - start) * l;
}
function animateAttribute(element, attribute, startValue, endValue, duration) {
const startTime = performance.now();
function animate(now) {
const timeSinceStart = (now - startTime) * 0.001;
// l goes from 0 to 1 over durationInSeconds;
const l = Math.min(timeSinceStart / duration, 1);
element.setAttribute(attribute, lerp(startValue, endValue, l));
// if we haven't finished request another animation frame
if (l < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
const element = document.getElementById('id1');
const attribute = 'width';
const start = 600;
const end= 0;
const duration = 1;
animateAttribute(element, attribute, start, end, duration);
#id1 { background: red; }
<canvas id="id1"></canvas>
也可以将 l
传递给 these functions 中的任何一个并将结果传递给 lerp,您可以更改动画与 these styles of motion 中的任何一个相匹配的方式。 .
关于你的其他问题
Is there any way I can achieve this while using requestAnimationFrame? If I could get the average interval between frames or the fps that would work I think.
您可以计算帧之间的间隔。示例:
let then = performance.now();
function animate(now) {
deltaTimeInMilliseconds = (now - then);
then = now;
...
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
Am I perhaps worrying about something that isn't really a big issue?
只有你能回答这个问题
What fps can I expect on different devices (mobile, pc, tablet, etc.)?
大多数设备的帧率为 60fps,但也有以 120fps 或 240fps 运行的游戏显示器以及通常以 90fps 或更高帧率运行的 VR(和 WebVR),您可以在 VR 中使用浏览器。您是否关心其中任何一种情况取决于您。
关于javascript - 如何独立于刷新率计时 requestAnimationFrame(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46852857/
我在将 Firebase 调用函数的返回值分配给全局变量时遇到问题。这是我的功能: function getThePushNameById( path , id ){ path.once(
我正在尝试使用 javascript 创建倒计时。我从 here 得到了一些代码并略作修改。 var c=10, t; function timedCount() { document.getE
我想使用java脚本计算点击两个按钮之间的时间差 最佳答案 这里有一个提示 - 使用: var t = Date.now(); 以毫秒分辨率获取当前时间(自 1970 年 1 月 1 日 00:00:
我试图在单击按钮时显示时钟,但并调用设置超时事件来连续显示当前时间。但每当我单击按钮时,它只会鞋一次。如果我在一段时间后单击,那么它也可以工作,但不会显示连续变化的时间。 脚本 function sh
我有一种情况,在模型的 afterSave 中回调,我正在尝试从远程关联访问数据(这是一个具有非常不稳定的关联链接的遗留数据模型)。我发现的是,在回调中我可以对模型执行查找调用,但如果我此时退出,则记
我这里有这段代码,它从数据库中获取一些运动统计数据,并对其进行更新 - 我正试图在检测到变化时发出警报(#scorealert div)。如果只有一个分数发生了变化,这就可以正常工作。当有多个更改时,
我正在制作一个测验应用程序,我想在其中显示用户在玩游戏时所用的时间。它应该采用 HH:MM:SS 格式,从 00:00:00 开始,直到他选择答案。当用户每秒播放时,计时器应该每秒更新一次。另外,我想
我想知道在 Postgres 中执行查询所需的时间,我看到很多建议使用\timing 的响应,但我是 Postgres 的新手,我不知道如何使用它,谁能帮忙 提前谢谢你 最佳答案 您只能将 \timi
作为我大学论文的一部分,我试图测试几种不同类型的数字输入键盘界面的可用性。为此,我需要记录参与者按下的每个按键以及每个按键的时间。仅仅记录他们在表单上提交的内容是不够的,因为我需要监控他们看到并纠正了
我需要在我的网站上制作一些简短的“新闻快讯”...淡入和淡出一些 `s 并需要它们循环... 到目前为止我有这样的东西: $('.text01').hide().fadeIn('slow').dela
我希望有人能帮我解决这个问题。我想测量排序算法。这是我目前的做法: M = 1000 # number of executions N = [1000, 2000, 4000, 16000] # si
我的项目有个小问题:我在我的程序中使用 C++ chrono 库来处理时间。但是当我在调试计时时钟继续运行时到达断点并且当我继续程序时,与计时器一起工作的东西中有疯狂的值。 现在我的问题:是否有库或方
我正在开发一个 C++ 应用程序,它需要精确到毫秒级的详细计时信息。 我们打算使用标准 time() 收集精确到秒的时间在 中发挥作用.我们还想收集自 time() 给出的最后一秒以来经过的毫秒数。
我试图在敲击之间保持节奏。但是,我随机获得巨大的值(value),我不确定为什么。 @implementation GameScene { CFTimeInterval previousFram
我正在通过几个操作解析一个文件,我想测量执行这些操作所花费的时间。 执行此操作并打印时间的最佳方法是什么? 最佳答案 更新:如果您不反对使用外部库并且您使用的是 JDK 5+,Google Guava
我想收集与网络请求的每个阶段所花费的时间相关的统计信息。 httplib 提供: def run(self): conn = httplib.HTTPConnection('www.examp
我正在制作一款 Android 游戏,其中一些图形元素移动速度很快。我打算使用 Canvas,但担心 onDraw 方法会以不规则的间隔调用,从而使快速元素以不规则的速度移动。有没有办法确保定期调用
我正在制作一个按时间间隔执行的应用程序。更新之间我可以等待的绝对最长时间是30秒,介于0和0之间的任何值都是可以接受的,但是我希望15秒是一个很好的衡量标准。但是,它并不像听起来那样容易。我尝试了4种
我的桌面应用程序有一个恼人的问题,我无法弄清楚。我已将问题隔离到以下示例中。我正在尝试做什么...... 我有一个jframe和5个jpanels,每个面板都有不同的图片。启动后,用户将看到面板 A,
是否有一种标准的方法来记录 Quartz 执行任务所花费的时间?我也对基于 Spring 的解决方案持开放态度,因为我正在使用两者。 最佳答案 您可以使用通用计时库,例如 ERMA .它与 sprin
我是一名优秀的程序员,十分优秀!