如何使用javascript減慢此動畫效果

我正在爲地圖添加多段線，並使用多段線裝飾器插件向多段線添加旅行箭頭的方向。然後用setInterval沿着折線移動箭頭，使用簡單的計數增量作爲偏移的百分比。如何使用javascript減慢此動畫效果

問題是我進一步放大（超過縮放級別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); 
}

任何幫助全功能大加讚賞。

來源

2013-02-01 Vince Lowe

非常好的問題！描述得很好的問題，提供了上下文和代碼，以及一個jsfiddle沙箱！ +1 –

那麼爲什麼你不使用setInterval的timout shomehow中的縮放級別？ – marekful

@MarcellFülöp嘗試人，哦，即時嘗試... –

// 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); 
}

對我來說工作得很好，即使放大，速度也很慢。合乎邏輯的是，它看起來比縮小更快。還是我不明白你的問題，電賀

來源

2013-02-01 16:48:54

是的，這使得它縮小時太慢了。我需要一個很好的可視速度放大或縮小。 –

這似乎是在做的伎倆，需要一些微調..感謝

// 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); 
}

來源

2013-02-01 17:22:30

如何使用javascript減慢此動畫效果

回答

相關問題