Как добавить эффект анимации на пузырьки в картах данных angular 8? - PullRequest
Новая
       21

Как добавить эффект анимации на пузырьки в картах данных angular 8?

1 голос
/ 29 января 2020

Я хочу добавить эффект анимации к пузырькам на карте SVG, используя карты данных в angular 8. Пузыри отображаются правильно, но анимация не работает. Это то, что я пробовал до сих пор 

.bubbles circle.datamaps-bubble  {
  -webkit-animation: ripple 0.7s linear infinite;
      animation: ripple 0.7s linear infinite;
}
@-webkit-keyframes ripple {
  0% {
      box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
   box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}
@keyframes ripple {
 0% {
    box-shadow: 0 0 0 0 rgba(101, 255, 120, 0.3), 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3);
 }
 100% {
    box-shadow: 0 0 0 1em rgba(101, 255, 120, 0.3), 0 0 0 3em rgba(101, 255, 120, 0.3), 0 0 0 5em rgba(101, 255, 120, 0.3), 0 0 0 8em rgba(101, 255, 120, 0);
 }
}

1 Ответ

0 голосов
/ 04 февраля 2020

вы можете сделать это с помощью плагина исчезающих пузырей 

this.worldMap.addPlugin('fadingBubbles', fadingBubbles);

_this = this;
    setInterval(function() {
        drawBubbles(_this);
     }, 2000); 
    drawBubbles(this);
    _drawDOT(this);
    function drawBubbles(that){
        that.worldMap.fadingBubbles(that.mapBubbles, {  });

    }
...