Question

我尝试使用JavaScript为Clip-Path属性设置动画。

方法：在SetTimeout的帮助下“增长”。

我尝试了此操作，但没有用。 http://jsfiddle.net/071dm2h3/8/

var el = document.getElementById("image")

function grow(i) {
    el.style.clipPath = "circle("+ i +"px at 190px 160px)";
}

var i;
for(i = 0; i < 100; i++) {
  setTimeout(grow(i), 400);
}

我在这里想念什么？ setTimeout是否应该在每个循环中更改I的值，以便我可以立即看到结果？

Answer 1

为使此功能生效，我重写了您的setTimeout，使其围绕您的循环以使图像变大。

setTimeout( function(){ 
 for(i = 0; i < 100; i++) {
  grow(i)
 }
},400);

这里是jsfiddle

Answer 2

否，setTimeout会触发一次，并且只会触发一次。此外，您使用setTimeout的方式还会导致意外的结果。您基本上是在说：

我想从现在开始400毫秒内拨打grow(i) 100次。

这意味着从现在起400毫秒内，grow(i)被同时调用100次。您不希望那样，您想调用`grow（i）100次，每次迭代之间等待400毫秒。

相反，您应该使用setInterval来等待每个呼叫之间的持续时间，或者让每个setTimeout安排持续时间之后的下一次超时。

考虑：

这将等待2秒钟，然后同时打印1,2,3,4。

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 2000);
}

这将在持续时间后打印每次迭代：

function iteration(i) {
  console.log(i);
  if (i > 3) return;
  setTimeout(() => iteration(i + 1), 500);
}

iteration(0);

Answer 3

将您的JavaScript更改为此

var el = document.getElementById("image")

function grow(i) {
console.log(i)
    el.style.clipPath = "circle("+ i +"px at 190px 160px)";
}

var i;
for(i = 0; i < 100; i++) {
  setTimeout( ((i) => () =>  grow(i))(i), i*10);
}

，请阅读一次 setTimeout in for-loop does not print consecutive values

使用Javascript的CSS剪辑路径动画

3 个答案: