个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
“requestAnimationFrame”方法在以下示例中不起作用。控制台不显示任何错误消息。那么这段代码的错误是什么？HTML:
<body>
<div id="container">
<canvas id="canvas" width="1024" height="1024"></canvas>
</div>
<script type="text/javascript" src = "Jquery/easy.js"></script>
</body>
JavaScript:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var chop1 = new Image();
chop1.src = "img/chopper.png";
var chopperX = 0;
var chopperY = 0;
var ascent = 20;
function fly()
{
chopperY += ascent;
ctx.drawImage(chop1, chopperX, chopperY, 30, 80);
requestAnimationFrame(fly);
}
window.onload = function() {
init()
};
function init()
{
chop1.src = "img/chopper.png";
ctx.drawImage(chop1, 0, 0, 30, 80);
fly()
}
;
最佳答案
您可能希望使用传递给 requestAnimationFrame 的回调的 timestamp 来缩放动画。使用这样的东西:
var ascent = 20;
var limit = 5000;
var start = null;
function fly(timestamp) {
if (start === null) {
start = timestamp;
}
var progress = timestamp - start;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(chop1, 0, Math.min(progress / ascent, canvas.height),
chop1.width, chop1.height);
if (progress < limit) {
requestAnimationFrame(fly);
}
}
requestAnimationFrame(fly);
您可以修改 ascent 和 limit 来增加/减少动画的速度和最终位置。
正如其他人提到的，一定要使用正确的requestAnimationFrame:
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
更多信息:
关于javascript - "requestAnimationFrame"方法无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21139826/
26
4
0
假设我们有一个功能/模块，可以增强网站。所以这并不是真正必要的，它使用 requestAnimationFrame，即 not supported in older browsers比如IE8/9。我
“requestAnimationFrame”方法在以下示例中不起作用。控制台不显示任何错误消息。那么这段代码的错误是什么？HTML:
我有以下 JavaScript: function animate() { // call other function offset += 3; if (offset > 15) offset =
我有一些基本脚本可以将文本左右滚动，我尝试将其从 timeout 转换为 requestAnimationFrame，但是，我无法制作它有效。 function slideHorizontal(e,
我遇到了这个奇怪的问题，我递增了 1，但是，弹出 javascript 窗口时出现的增量显示我已递增了 9 或 13，这两者都来自于我是否分别增加 1 或 -1。这是怎么回事？ 这是 requestA
我试图了解有关 requestAnimationFrame 的一件事。 在下面的示例代码中，我运行了 60 次，这应该与您通常获得的典型每秒 60 帧相匹配，因此它应该持续 1 秒。然而我故意通过调用
有人可以分享一下在动画循环中应该在哪里进行 RequestAnimationFrame 调用吗？它应该在循环的开头还是循环的结尾？我已经多次看到它在循环开始时使用它，但是位于循环底部不是更好吗？这样在
我尝试为很多 svg 路径设置动画，但功能不起作用 错误: Uncaught RangeError: Maximum call stack size exceeded function dashOf
我有一张滑动图片沿着屏幕缓慢移动。一旦它们离开屏幕，它们就会背靠背靠在丝带上。因此，当您在网页上时一切正常，但当您离开并且其中一张图像超出范围时。它会被放回错误的地方。我认为这可能与 requestA
我在使用 requestAnimationFrame() 时遇到了性能问题。 考虑以下代码。这是一个简单的循环，每次时间增量大于 20 毫秒时，都会打印自上一帧以来的时间。 const glob_ti
根据我的阅读，requestAnimationFrame 可以判断浏览器何时失去焦点。发生这种情况时是否会触发某种事件？我正在寻找暂停和恢复与 requestAnimationFrame 相关的代码。
let pf = document.querySelectorAll('.pf'); for (let i of pf) { Object.assign(i.style, { left:
我最近看了 Jake Archibald 的演讲。他在演讲中举了一个例子，他说使用 requestAnimationFrame 两次来延迟应用 CSS 样式来执行 CSS 动画。 参见https://
我正在使用 requestAnimationFrame 为视频流设置动画，我知道请求动画在后台不起作用，所以有什么方法可以让它在后台运行。 我知道我们也可以使用 setInterval 或 setTi
我是编程新手，面对这个功能: function update(time = 0) { console.log(time); requestAnimationFrame(update);
我正在尝试使用 JavaScript 和 requestAnimationFrame 制作一个简单的计时器(从 0 开始计数)。单击某些内容时，我想从 0 开始计时。目前我的代码在单击按钮时显示计时器
如果我有以下代码: window.requestAnimationFrame(animation1); //animation1 takes more than 16.67ms, misses the
我有一个带有 requesetAnimationFrame 的动画，当我重播它时，它变得越来越快，直到它变得不可见。 function tirer(){ var missile=documen
我有一个问题: document.querySelector('div').addEventListener('mousedown', function(){ hello = true
我有一种情况，我想在 1 秒内将 600px 宽的 div 的宽度设置为 0px。为此，我可以使用 requestAnimationFrame()。但我真的不能 100% 确定动画是否需要 1 秒。
我是一名优秀的程序员,十分优秀！