使用Javascript实现CSS剪辑路径动画
我尝试用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的值，以便我可以立即看到结果吗？
回答 3
Stack Overflow用户
发布于 2018-09-08 02:15:28
为了让它工作，我重写了你的setTimeout在你的循环周围，以使图像增长。
setTimeout( function(){
for(i = 0; i < 100; i++) {
grow(i)
}
},400);这是jsfiddle
Stack Overflow用户
发布于 2018-09-08 02:16:58
不，setTimeout只触发一次，而且只触发一次。此外，您使用setTimeout的方式将导致意外的结果。你基本上是在说：
我想从现在起调用400毫秒后的grow(i) 100次。
这意味着从现在开始的400毫秒后，simultaneously.将被调用100次grow(i)你不会想要这样的，你想要调用` between (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);
Stack Overflow用户
发布于 2018-09-08 02:23:29
将您的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
https://stackoverflow.com/questions/52227592
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号