如何使用javascript减慢此动画的速度

我正在向地图添加多段线，并使用多段线装饰插件向多段线添加行进方向箭头。然后使用

setInterval

沿多段线移动箭头，使用简单的计数增量作为偏移百分比

问题是我进一步放大（超过缩放级别13）箭头速度太快。你能建议一种减缓速度的方法吗

要使用的一些变量包括：

map.getZoom（）

根据缩放级别更改速度

polyArray.length

是否可以根据多段线的长度更改速度

请看这里的小提琴：

下面是我的全部功能

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 100);
    mylayergroup.addLayer(polyline).addTo(map);
}

非常感谢您的帮助

    // add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
    var anim = window.setInterval(function() {
        arrowHead.setPatterns([
                {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;

    }, 1000); /* HERE 1000 INSTEAD OF 100 */
    mylayergroup.addLayer(polyline).addTo(map);
}

对我来说效果很好，速度很慢，即使你放大。这是合乎逻辑的，它似乎是一种比缩小更快的方式。还是我不明白你的问题，

---

问候

这似乎起到了作用，需要一些微调。。谢谢

// add map polylines
function addPolyline(polyArray, colour) {
    console.log(polyArray.length);
    polyline = L.polyline(polyArray, {color: colour});
    var arrowHead = L.polylineDecorator(polyline).addTo(mylayergroup);
    var arrowOffset = 0;
var anim = function(){   
    if(map.getZoom() < 15 ) { 
        arrowHead.setPatterns([
            {offset: arrowOffset+'%', repeat: 0, symbol: new L.Symbol.ArrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
        ])
        if(++arrowOffset > 100)
            arrowOffset = 0;        
        if(map.getZoom() <= 12) {
            setTimeout(anim, 100);
        } else if (map.getZoom() == 13) { 
            setTimeout(anim, 200);
        } else if (map.getZoom() == 14 ) { 
            setTimeout(anim, 300);
        }
    } else {
        arrowHead.setPatterns([
            {offset: 0, repeat: 100, symbol: new L.Symbol.ArrowHead({pixelSize: 10, polygon: false, pathOptions: {stroke: true}})}
        ])      
    }
}
anim();
    mylayergroup.addLayer(polyline);
}

//添加地图多段线
函数addPolyline（多边形阵列，彩色）{
控制台日志（多阵列长度）；
多段线=L.多段线（多边形阵列，{color:color}）；
var arrowHead=L.polylineDecorator（polyline）.addTo（mylayergroup）；
var-arrowOffset=0；
var anim=function（）{
如果（map.getZoom（）<15）{
箭头图案([
{offset:arrowOffset+'%'，重复：0，符号：新的L.symbol.箭头（{pixelSize:15，polygon:false，pathOptions:{stroke:true}}）}
])
如果（++箭头偏移>100）
箭头偏移=0；
if（map.getZoom（）问题很好！描述得很好，提供了上下文和代码，还有一个JSFIDLE沙盒！+1那么为什么不在setInterval的timout shomehow中使用缩放级别？@Marcell Fülöp trying man，哦，我在尝试…是的，这使得缩放时速度太慢了。我需要一个很好的可视缩放速度。