问题标签 [requestanimationframe]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 使用 Canvas / 动力学的 Opera 内存不足错误
我有一个使用 requestAnimationFrmae 构建的脚本。
在 chrome 中,它工作得很好。流畅而完美。然而,在 FF、Opera 和 Safari 中,它非常生涩。
我有一个语句可以确定浏览器是否可以处理 requestAnimationFrame 以及它是否不能求助于 timeOut()
谁能告诉我/看看为什么这么差/生涩。以及如何提高性能。
谢谢。
javascript - window.requestAnimationFrame() 使用它对吗?
我正在尝试在 touchmove 上创建动画,但我有点担心它会要求设备的硬件多少,所以我尝试使用 requestAnimationFrame 但我不知道我是否做对了。
我会很高兴收到一些反馈 (;
javascript - Firefox 19 和 RequestAnimationFrame 不工作
我试图让这个演示在 Firefox 19 上运行,但看起来 RequestAnimationFrame 没有被正确调用。
http://awardwinningfjords.com/projects/sequence/apple.html
所有其他浏览器和版本都可以正常工作,仅在 FF19 (Mac) 上
以前有人有这个问题吗?
谢谢
javascript - 计算 AnalyserNode 的 smoothingTimeConstant
我正在使用 Web Audio API 来显示正在播放的音频的可视化。我有一个控制播放的元素,然后我通过从该元素创建一个节点将<audio>
它连接到 Web 音频 API 。然后将其连接到 a和 an 。的设置为。然后将 连接到。MediaElementSource
<audio>
GainNode
AnalyserNode
AnalyserNode
smoothingTimeConstant
0.6
GainNode
AudioContext.destination
然后我调用我的音频处理函数:onAudioProcess()
. 该函数将使用以下方法不断调用自身:
该函数使用音频中的AnalyserNode
to getByteFrequencyData
,然后循环遍历(现在已填充)并在元素的 2d 上下文中Uint8Array
绘制每个频率幅度。<canvas>
这一切都很好。
我的问题是,当您暂停<audio>
元素时,我的onAudioProcess
函数会继续循环(通过请求自身的动画帧),这会不必要地占用 CPU 周期。我可以cancelAnimationFrame(audioAnimation)
,但这会在画布上留下最后绘制的频率。我也可以通过调用画布的 2d 上下文来解决这个问题,但与仅让音频处理循环继续(由于.clearRect
smoothingTimeConstant
所以我最终做的<audio>
是在取消动画帧之前在暂停时设置超时。这样做我能够在没有音频播放时节省 CPU 周期,并且我仍然能够保持平滑降低<canvas>
.
我的问题:如何根据AnalyserNode
's 的smoothingTimeConstant
值准确计算频率幅度为 255 达到 0(范围为 0-255)所需的毫秒数,以便我可以正确设置超时以取消动画帧?
javascript - 是否有必要在再次调用之前取消未完成的 requestAnimationFrame?
我正在研究新兴的requestAnimationFrame
标准cancelAnimationFrame
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
以及此处提供的各种 polyfill:
使用这些函数的语义对我来说有点棘手。具体来说,假设你requestAnimationFrame(callback)
曾经。cancelAnimationFrame
如果您想requestAnimationFrame(callback)
在第一个回调被调用之前第二次调用,是否有必要调用?浏览器会重复调用回调吗?或者浏览器会自动用一个调用替换双调用?
我问是因为我当前的动画在 Firefox 上真的很滞后,并且 requestAnimationFrame 似乎没有太大帮助。但我可能从多个来源调用它太快了。对此有权威的回答会很棒。
javascript - d3的转场和动画是否使用requestAnimationFrame?
我试图弄清楚 d3 的默认动画requestAnimationFrame
是否已经用于回调,或者我是否需要自己做。例如,我已经定义了一个自定义补间,它反复调用重绘函数来动画在图形上从一个域到另一个域的过渡(这是在咖啡脚本中):
在我所有其他重绘调用中,我安排它requestAnimationFrame
:
但是,我想知道我是否需要在这里做同样的事情。我一直在查看 d3 源代码,发现唯一的引用requestAnimationFrame
是在d3 计时器类中。希望对 d3 有更多了解的人可以帮助回答以下问题:
- d3 计时器是否全局用于所有 d3 动画和过渡?
- 我需要在
requestAnimationFrame
这里手动使用吗?如果没有,在使用 d3 时我是否需要自己使用它?
javascript - Proper way to pause animations when not in view
I'm wondering whether there is a proper way to pause requestAnimationFrame animations when the user has scrolled and the animation is not in the view anymore?
requestAnimationFrame does this automatically when the browser displays another tab, but is it possible to do it when the user scrolls?
javascript - 游戏开发:Javascript
大家好,我的电脑上的人 ;-) 我正在尝试为自己开发一款带有 HTML 5 & JS & CSS 的游戏。在许多教程中,我看到了“requestAnimationFrame”方法。我复制并尝试识别“requestAnimationFrame”的机制。
我向您展示了一些源代码(fullJSCode),希望您能理解我的问题: http ://pastebin.com/YXf7Nkwd
我的循环不起作用...我在 ("W","A","S","D") 上绑定键以移动矩形正方形...但我的正方形不移动:(
任何人都可以帮助我吗?
亲切的问候
javascript - requestAnimationFrame - 浏览器支持问题
以上是我正在尝试创建的动画的 JSfiddle。它在 Chrome 中 100% 可以正常工作,但在其他浏览器中存在各种问题。
似乎在Firefox中它不会渲染动画。根据 Mozilla Dev Network docs @ https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame,我相信我已经添加了跨浏览器支持,但也许我做错了什么。
在 IE(至少 8 + 10)中,它不会渲染动画,也不会渲染我的径向渐变(如果有人能提供帮助,这也是一个附带问题)。
IE 在这行代码上给了我一个 IndexSizeError 错误
但我不确定这具体意味着什么,而且我找不到太多关于该错误/该方法的信息。
任何人都可以启发我吗?
干杯
javascript - requestAnimationFrame polyfill:元素参数是干什么用的?
我正在使用 Erik Möller 的 requestAnimationFrame polyfill(来自 Paul Irish 和 Tino Zijdel 的修复),我想知道第二个名为“element”的参数是什么。
这是代码:
所以我的问题是关于这条线:
“元素”有什么作用?
非常感谢您,
琼