Question

我有一个SVG，我想非常简单地对其进行动画处理。我想制作动画的一件事是我想沿直线移动的球。这是我尝试过的：

const ball = document.getElementById('ball');
let i;
let j = 0;
for (i = 26.1; i <= 78.9; i+=0.1) { //26.1 and 78.9 are the maximum x positions of my ball.
  setTimeout(function(){ball.setAttribute("cx", `${i}`);}, j*1000);
  setTimeout(function(){ball.setAttribute("cy", `${1.12 * i + 0.12});}, j*1000);
  j++;
}

我尝试了几种变体，然后才知道问题是：所有的计算都在几分之一秒之内，我发现我的球在加载时间上处于她的最终位置...

我还尝试了window.setInterval()的另一个变体，但后来我失去了使用变化的i来计算坐标的优势。

因此，我想知道：是否有任何方法可以多次编辑同一属性，并且每次编辑之间都有时间间隔？

Answer 1

以下是一些入门指南：

var xPos = 0;
var speed = 1;

function loop() {
  document.getElementById("ball").style.left = xPos + "px";
  xPos += speed;
  if (xPos > 200) {
    speed = -Math.abs(speed);
  }
  if (xPos < 0) {
    speed = Math.abs(speed);
  }
  xPos += speed;
}
var interval = setInterval(loop, 20);

<svg height="100" width="100" id="ball" style="position:relative">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

使用循环多次更改html属性

1 个答案: