我正在学习 Javacript 并测试书中的代码(如下)。它应该为图像设置动画，但没有。我使用警报添加打印输出，显示该函数仅执行一次。出了什么问题？
<!doctype html>
<html>
<head>
<title> My home page </title>
<script>
var cat = document.querySelector("img");
var angle = 0, lastTime = null;
var count = 0;
function animate(time) {
//alert(count);
//++count;
if (lastTime != null)
angle += (time - lastTime) * 0.001;
lastTime = time ;
cat.style.top = (Math.sin(angle) * 20) + "px";
cat.style.left = (Math.cos(angle) * 200) + "px";
requestAnimationFrame(animate);
}
</script>
</head>
<body>
<p style ="text-align: center">
<img src ="img/cat.jpg" style ="position: relative">
</p >
</body>
<script>requestAnimationFrame(animate);</script>
</html>
感谢您的帮助。
最佳答案
如果您查看控制台，您将看到 cat 是 undefined。
发生这种情况是因为 var cat = document.querySelector("img"); 在 head 元素中运行，因此 img 会执行此操作还不存在。
如果将代码移到 body 的末尾，它将起作用。
或者，您可以在触发 DOMContentLoaded 事件时运行代码。
<!doctype html>
<html>
<head>
<title> My home page </title>
</head>
<body>
<p style ="text-align: center">
<img src ="img/cat.jpg" style ="position: relative">
</p >
</body>
<script>
var cat = document.querySelector("img");
var angle = 0, lastTime = null;
var count = 0;
function animate(time) {
//alert(count);
//++count;
if (lastTime != null)
angle += (time - lastTime) * 0.001;
lastTime = time ;
cat.style.top = (Math.sin(angle) * 20) + "px";
cat.style.left = (Math.cos(angle) * 200) + "px";
requestAnimationFrame(animate);
}
</script>
<script>requestAnimationFrame(animate);</script>
</html>关于Javascript:使用 requestAnimationFrame 没有动画的代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47663415/