Comment faire pour ralentir cette animation avec javascript

Question

J'ajoute une polyligne à une carte et j'utilise un plugin Polyline Decorator pour ajouter une flèche de direction à la polyligne. Puis avec setInterval déplacer la flèche le long de la polyligne en utilisant un simple incrément de comptage comme le pourcentage de décalage.

Le problème est le plus grand zoom avant (quelque chose de plus que le niveau de zoom 13) la vitesse de la flèche est beaucoup trop rapide. pouvez-vous suggérer un moyen de le ralentir?

certaines variables dans le jeu sont:

map.getZoom() pour changer la vitesse en fonction du niveau de zoom?

polyArray.length peut changer la vitesse en fonction de la longueur de la polyligne?

Voir violon ici: http://jsfiddle.net/KSv2h/

et ma pleine fonction ci-dessous

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

une aide très appréciée.

Answer 1

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

fonctionne très bien pour moi, la vitesse est lente, même si vous effectuez un zoom. Il est logique qu'il semble être un moyen plus rapide que sur zoomée. Ou est-ce que je comprends pas votre problème, Salue

Answer 2

Cela semble faire l'affaire, a besoin de quelques ajustements .. merci

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