为什么 setinterval 动画不起作用？答案

【问题标题】：Why is setinterval animation not working?为什么 setinterval 动画不起作用？
【发布时间】：2020-08-29 00:00:06
【问题描述】：

我尝试使用 setInterval 和一个改变样式属性的函数来创建猫走路的动画。然而，这不起作用。没有动画。而且我已经正确完成了所有操作，所以我不知道为什么它不起作用。

<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Catwalk</title>
        <style>
            #cat {
                position: absolute;
                left: 0px;
            }
        </style>
    </head>
    <body>
    <div>
        <!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
        <img id="cat" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
    </div>

  <script>
  var catEl = document.getElementById("cat");

  function walkTheCat(){
      catEl.style.left=parseFloat(catEl.style.left)+40+"px"
  };
  setInterval(walkTheCat,1000)
  </script>

    </body>
</html>```

【问题讨论】：

避免使用 JavaScript 制作动画。使用 css 动画。
catEl.style.left = (parseFloat(catEl.style.left) || 0) + 40 + "px" ... 因为元素本身没有 left 样式值 - CSS 不会为元素样式添加样式

标签： javascript function setinterval

【解决方案1】：

由 CSS 设置的样式不会出现在元素的样式属性中。要使其正常工作，请将其更改为使用 left 的内联样式或使用 getComputedStyle。我个人认为使用内联样式更简单：

<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Catwalk</title>
    </head>
    <body>
    <div>
        <!-- Cat walking GIF from: http://www.anniemation.com/clip_art/graphics.html -->
        <img id="cat" style="left:0px" src="https://www.kasandbox.org/programming-images/misc/cat-walk.gif">
    </div>

....

【讨论】：

或catEl.style.left = (parseFloat(catEl.style.left) || 0) + 40 + "px":p

【解决方案2】：

最简单的解决方案是使用计数器。 left = left + 40 这将确保猫在屏幕上动画。

var left = 0;
function walkTheCat() {
  catEl.style.left = left;
  left = left + 40;
};

setInterval(walkTheCat, 1000)

我录制了一个截屏视频，向您展示了我是如何解决这个问题的。你可以找到highlight of the solution here。

catEl.style.left 不提供 css 属性。见我try to log it here。

您可以通过检测图像何时中断window.innerWidth 来循环猫。见我的looping cat here。

【讨论】：