javascript - 调用两个 JS 函数并同步它们(snakeAnim 和 Animated Marker)

Question

当前正在尝试跟踪传单上的 Assets 。这个想法是绘制一条多段线，为其设置动画，并为沿着多段线移动的标记设置动画。折线脚本来自 IvanSanchez SnakeAnim

动画标记的脚本是atogle AnimatedMaker

问题是，我相信它们有两种不同的速度。有什么帮助将这两个功能“合并”为一个吗？不幸的是，一个函数使用像素来表示距离，而另一个函数则使用实际的物理距离。

谢谢!

<div><p> <button id = "start" onclick='snake();'>Start Animation</button></p></div>

var polylines = [];
var markers = [];

for (var i = 0;  i < route.length; i++) {
         polylines.push(L.polyline(route[i]));

            var marker = L.animatedMarker(L.polyline(route[i]).getLatLngs(), {
            icon: Tanker,
            autoStart: false,
            onEnd: function() {
            $(this._shadow).fadeOut();
            $(this._icon).fadeOut(3000, function(){
            map.removeLayer(this);
            });
            }
            });
    }
    var pathmat = L.featureGroup (polylines);

function snake() 
    {               

            pathmat.snakeIn();  
            }
            pathmat.on('snakestart snake snakeend', function(ev){
            console.log(ev.type);
            marker.start();
        });

Answer 1

有趣的是，几个月前我也有同样的想法。

我没有使用 AnimatedMarker，而是 MovingMarker因为它在缩放时表现得更好，并且您可以给它一个持续时间数组以使其具有可变速度。

在意识到你所说的同样的速度问题后，我提交了 an issue到 SnakeAnim 项目询问是否可以设置动画持续时间而不是动画速度。一位开发人员回答我，这很难做到。 SnakeAnim 并不是这样设计的。

然后我有了一个想法。使用 addLatLng 方法可以很容易地逐步绘制多段线。我所要做的就是每次 MovingMarker 移动时触发一个事件，在我的代码中获取此事件以将当前 MovingMarker 位置添加到折线坐标。 Here就是结果。

我对 MovingMarker 的修改是 here 。只需添加此 if block 即可。 然后我通过这种方式在 MovingMarker 上获取 move 事件:

var completePolyline = L.polyline(coordinatesTable);
var snakePolyline = L.polyline([]);

// add coordinates to the current snake line when marker moves
function updateSnakeLine(e) {
    var ll = e.target.getLatLng();
    snakePolyline.addLatLng(ll);
}

var marker = L.Marker.movingMarker(completePolyline.getLatLngs(), 20000,{
    autostart: false,
    icon: theicon
});
marker.on('move', updateSnakeLine);
marker.start()

此技术的一个缺点:如果浏览器在几毫秒内速度缓慢，它将跳过一些标记位置，因此蛇折线可能不严格等于完整折线。这就是为什么在动画结束时，我删除蛇折线并绘制完整的折线。