Leaflet 在地图盒/传单中设置半径更改动画

我已使用L.circle绘制了一个圆。我想用平滑动画更改半径？

小提琴：

var circle=L.circleMarker（[50.5,30.5]），{radius:5}.addTo（map）；
var newRadius=200；
var interval=setInterval（函数（）{
var currentRadius=circle.getRadius（）；
调试（“currentRadius”，currentRadius）；
if（当前半径<新半径）{
圆。设定半径（++currentRadius）；
调试（“新半径”，circle.getRadius（））；
}否则{
间隔时间；
}
}, 1);

---

只需修改传递给间隔的函数，以将半径作为参数。

它不起作用。这里没有while循环。因此，它不会增加到新的半径。即使添加while循环，转换也不会平滑。当然，没有for循环。这是javascript！不能在“循环”中设置动画。它使用setTimeout增加半径，直到达到目标大小。它在中间看起来很光滑。这应该是公认的答案。当然，用javascript制作动画有很多技巧，但这是最简单的方法。@Bernard确实使用interval是我的选择，你可以尝试用简单的CSS来制作，但由于传单已经为自己设置了很多样式属性，如transform，我会非常小心地这样做。您可以通过减少增量值使其更平滑（或不平滑），例如，在每一步将半径增加0.1，而不是1

var circle = L.circleMarker([50.5, 30.5], {radius: 5}).addTo(map);


var newRadius = 200;
var interval = setInterval(function() {
   var currentRadius = circle.getRadius();
   console.debug("currentRadius", currentRadius);
   if (currentRadius < newRadius) {
       circle.setRadius(++currentRadius);
       console.debug("new Radius", circle.getRadius());
   } else {
       clearInterval(interval);
   }
}, 1);