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

时间:2018-10-15 12:19:46

标签: javascript animation leaflet polyline

我很欣赏他所做的工作,但是我们无法控制动画的暂停和播放。我想扩展功能以支持播放和暂停选项,以便在传单上制作Polyline的动画。有什么方法可以在按钮单击时添加暂停和播放动画吗?请指出方向。如果有更好的方法,请告诉我。

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

可在此处找到JavaScript代码Leaflet.SnakeAnim

1 个答案:

答案 0 :(得分:1)

存储从调用L.Util.requestAnimFrame()here的返回值。

添加名为snakePausesnakeStop或类似名称的新方法,然后使用先前存储的值调用L.Util.cancelAnimFrame。根据需要添加健全性检查(检查是否确实存在储值,等等)。

添加另一个名为snakeResume或类似名称的方法,然后调用L.Util.requestAnimFrame()重新启动对this._snake()的延迟调用。添加健全性检查,以便多次调用snakeResume不会造成不良影响(请检查是否没有存储来自先前requestAnimFrame的返回值,等等)。


暂停和恢复是纯粹的计时器问题,应单独使用requestAnimFramecancelAnimFrame处理,并注意任何潜在的比赛条件。除了严格必要的数据(延迟调用的存储值,以及用于计时线路增长的存储的performance.now值)外,根本不需要弄乱数据。