leaflet呼吸闪烁效果

leaflet呼吸闪烁效果

1.功能背景

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

2.功能开发

2.1 marker

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

function setTargetSelect(e){
    var i = 1
    var int = setInterval(() => {
    if(!e._map) clearInterval(int)
        if (i < -1) {
            i = 1
        }
        i = i - 0.08
        if (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 = null
    var i = 1
    var j = 0.2 //注意要和线的透明度同步修改，保持开始和结束时间一致
    function updateAnimation() {
        if (i < -1) {
            i = 1
        }
        i = i - 0.01
        if (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)