leaflet呼吸闪烁效果

1.功能背景

这个效果一把用于点击选中，报警提升效果。

2.功能开发

2.1 marker

这个效果还是很好实现，主要通过计时器+设置透明度的组合实现。

function setTargetSelect(e){var i = 1var int = setInterval(() => {if(!e._map) clearInterval(int)if (i < -1) {i = 1}i = i - 0.08if (i < 0)   e.setOpacity(i * -1)else   e.setOpacity(i)},50)
}

写成了一个function，当需要呼吸闪烁的marker添加到地图时，将marker传入这个方法就可以了。这个marker在地图移除时，也会自动停止这个计时器。

  var marker = L.marker(evt.latlng).addTo(map);setTargetSelect(marker)

Marker可以，其他要素也当然可以就是方法不同。

2.2 其他要素

其他要素例如面，需要设置方法为 e.setStyle({opacity:i ,fillOpacity:j}，opacity为对线的透明度的修改，fillOpacity是对面中间的填充颜色透明的的修改。
但是在最终实现上发现，使用setInterval会产生迷之卡顿，经过一顿百度后通过别的方法解决，参考链接聊聊使用 JavaScript 做动画出现卡顿的原因
最后代码如下

function setTargetSelect2(e) {let timer = nullvar i = 1var j = 0.2 //注意要和线的透明度同步修改，保持开始和结束时间一致function updateAnimation() {if (i < -1) {i = 1}i = i - 0.01if (j < -0.2) {j = 0.2}j = j - 0.002 //注意要和线的透明度同步修改，保持开始和结束时间一致if (i < 0)   e.setStyle({opacity:i * -1,fillOpacity:j*-1})else   e.setStyle({opacity:i,fillOpacity:j})if (!e._map) return cancelAnimationFrame(timer)window.requestAnimationFrame(updateAnimation)}window.requestAnimationFrame(updateAnimation)}

调用方法

 var polygon = L.polygon([[0, 20], [-30, 20], [-10, 50], [0, 20]], {color: 'red'});setTargetSelect2(polygon)