如何扩展 Ivan Sanchez 的 Leaflet.Polyline.SnakeAnim 以支持“snakepause”和“snakeplay”事件

【问题标题】：How can I extend Ivan Sanchez's Leaflet.Polyline.SnakeAnim to support 'snakepause' and 'snakeplay' events如何扩展 Ivan Sanchez 的 Leaflet.Polyline.SnakeAnim 以支持“snakepause”和“snakeplay”事件
【发布时间】：2019-03-19 21:03:19
【问题描述】：

我很欣赏他所做的工作，但是我们无法控制暂停动画并播放它。我想扩展功能以支持在传单上为Polyline 设置动画的播放和暂停选项。有没有办法在按钮单击时添加暂停和播放动画？请指出方向。如果有更好的方法，请告诉我。

我检查了代码，发现当_snakingVertices 变量的值变为_snakeLatLngs.length-1 时动画停止但无法使用。这是一个独特的挑战。

javascript代码可以在这里找到Leaflet.SnakeAnim

【问题讨论】：

他在stackoverflow上很活跃，所以他可能会给你一些关于如何实现它的提示。

标签： javascript animation leaflet polyline

【解决方案1】：

将调用的返回值存储到L.Util.requestAnimFrame()，这发生在here。

添加一个名为snakePause 或snakeStop 或类似名称的新方法，并使用之前存储的值调用L.Util.cancelAnimFrame。根据需要添加完整性检查（检查是否确实存在存储值等）。

添加另一个名为snakeResume 或类似名称的方法，并调用L.Util.requestAnimFrame() 以重新启动对this._snake() 的延迟调用。添加完整性检查，以便多次调用 snakeResume 不会产生不良影响（检查是否没有存储来自先前 requestAnimFrame 的返回值等）。

暂停和恢复是纯粹的计时器问题，应该单独使用requestAnimFrame 和cancelAnimFrame，注意任何潜在的竞争条件。除了严格必要的（延迟调用的存储值，以及用于计时线路增长的存储performance.now值）之外，根本没有必要弄乱数据。

【讨论】：