Javascript：没有带requestAnimationFrame动画的代码？
我正在学习Javascript并测试下面书中的代码。它应该为图像设置动画，但不会。我使用alert添加打印输出，它显示函数只执行一次。出了什么问题Javascript：没有带requestAnimationFrame动画的代码？,javascript,Javascript,我正在学习Javascript并测试下面书中的代码。它应该为图像设置动画，但不会。我使用alert添加打印输出，它显示函数只执行一次。出了什么问题 <!doctype html> <html> <head> <title> My home page </title> <script> var cat = document.querySelector("img"); var angle = 0, lastTime =
<!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未定义 这是因为var cat=document.querySelectorimg；在head元素中运行，因此img还不存在 如果你把代码移到正文的末尾，它就会起作用。 或者，可以在触发DOMContentLoaded事件时运行代码 我的主页
var cat=document.querySelectorimg； var angle=0，lastTime=null； var计数=0； 函数动画时间{ //警报计数； //++计数； 如果lastTime！=null 角度+=时间-上次时间*0.001； lastTime=时间； cat.style.top=Math.sinangle*20+px； cat.style.left=Math.cosangle*200+px； 请求动画帧动画； } 请求动画帧动画； 当浏览器看到标记时，他停止呈现页面，并在其中运行代码 因此，代码中的问题是，行var cat=document.querySelectorimg；在img附加到文档之前发生，因此查询将一无所获 您需要做的唯一更改是移动var cat=document.querySelectorimg；在身体下面，像这样：
</body>
<script>
var cat = document.querySelector("img");
requestAnimationFrame(animate);
</script>
</html>