antv x6 图片添加闪烁效果

 先看方法

getImageActive(tid, type){// tid需要添加闪烁动画node的id
    var imgElem = $("#mapContainer").find('image')// mapContainer画布容器id
    imgElem.each( (index, node)=> {
      var id = node.parentNode.getAttribute('data-cell-id')
      if(tid == id){
        if(type == 'add'){// 增加闪烁动画
          node.setAttribute('class', 'imgactive')
        }else{// 移除闪烁动画
          node.removeAttribute('class', 'imgactive')
        }
      }
      // node.setAttribute('class', '')
    })
  }

css

.imgactive{
	animation-name:myfirst;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
	/* Safari and Chrome: */
	-webkit-animation-name:myfirst;
	-webkit-animation-duration:1s;
	-webkit-animation-timing-function:linear;
	-webkit-animation-delay:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-webkit-animation-play-state:running;
}

@keyframes myfirst
{
	0%   {opacity:1;}
	25%  {opacity:0.7;}
	50%  {opacity:0.5;}
	75%  {opacity:0.3;}
	100% {opacity:0.1;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {opacity:0.1;}
	25%  {opacity:0.3;}
	50%  {opacity:0.5;}
	75%  {opacity:0.7;}
	100% {opacity:1;}
}

这样就好了，是不是很简单呢😀