JavaScript动画运动

JavaScript animations movement

本文关键字：运动 动画 JavaScript      更新时间：2023-09-26

我正在尝试用JavaScript制作动画，但由于我的代码无法工作，我找不到一个错误。我试图让蓝色的盒子从左向右倾斜移动，但它只是静止不动。请帮忙。

function animate() {
  var elem = document.getElementById('ani');
  var pos = 0;
  var id = setInterval(frame, 3);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}
#box {
  background: red;
  width: 400px;
  height: 400px;
  position: relative;
}
#ani {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
}
<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css' />
  <script src='script.js'></script>
  <title>Practice</title>
</head>
<body>
  <p>
    <button onclick="animate()">OK</button>
  </p>
  <div id="box">
    <div id="ani"></div>
  </div>
</body>
</html>

使用与animate不同的函数名称。【参考】

Element.animate()方法是用于在元素上创建和播放动画的快捷方法。当声明global function animate()时，Element.prototype.animate 会shadowed

试试这个：

function animateMe() {
  var elem = document.getElementById('ani');
  var pos = 0;
  var id = setInterval(frame, 3);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
    }
  }
}
 #box {
   background: red;
   width: 400px;
   height: 400px;
   position: relative;
 }
 #ani {
   background: blue;
   width: 50px;
   height: 50px;
   position: absolute;
 }
<p>
  <button onclick="animateMe()">OK</button>
</p>
<div id="box">
  <div id="ani"></div>
</div>

注意：如提供的参考中所述，您可以使用window.animate()，因为它不是指shadowed原型，而是指Global animate function

Fiddle here

相关文章：