Question

我现在正在挖掘Highcharts / Highmaps。我需要帮助。

场合是：当服务器给我lat / lon信息时，我根据lat / lon呈现光环动画。我的问题是动画。

所需的动画就像this

/*CSS*/
body {
   background-color: black;
}
#circle-1 {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 40px;
   opacity: 0;
   animation-name: scale;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
@keyframes scale {
   0% {
       transform: scale(0.1);
       opacity: 0;
       box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
   }
   50% {
       transform: scale(0.5);
       opacity: 1;
       box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
   }
   100% {
      transform: scale(1);
      opacity: 0;
      box-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
   }
}

//js
var renderer;
$(function () {
    renderer = new Highcharts.Renderer(
        $('#container')[0],
        400,
        300
    );
    drawCircle();
});
function drawCircle(){
    renderer.circle(200, 150, 20).attr({
        id:'circle-1',
        fill: '#FCFFC5',
        stroke: 'black',
        'stroke-width': 1
    }).add();
}

这个动画到目前为止我能做什么，请查看jsfiddle。

html, body {
    overflow: hidden;
    background: #111;
}

.hole {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2000;
}

i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0px;
    top: 0px;
    border-radius: 40px;
    opacity: 0;
    animation-name: scale;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes scale {
    0% {
         transform: scale(0.1);
         opacity: 0;
         box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
    }
    50% {
         transform: scale(1) translate(0px, -5px);
         opacity: 1;
         box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
    }
    100% {
         transform: scale(2) translate(0px, 5px);
         opacity: 0;
         box-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
    }
 }

我希望圆圈保持在那里缩放并进行一些不透明度变化。但是当我应用比例尺时，它似乎根据左上角进行缩放。我们将非常感谢您的帮助。

Answer 1

在transform中你应该使用按（1 - 比例）值缩放的原始平移位置，因此对于比例（0.1），将有平移（180px，135px），因为180 = 200 *（1 - 0.1） 135 = 150 *（1 - 0.1）。

要获得相同的圆圈，您可以使用渐变填充，如：

fill: {
  radialGradient: {
    cx: 0.5,
    cy: 0.5,
    r: 0.5
  },
  stops: [
    [0, 'none'],
    [0.5, 'rgba(0,0,0,0)'],
    [0.5, 'rgba(255,255,255,0.5)'],
    [1, 'rgba(0,0,0,0)']
  ]
},

示例：http://jsfiddle.net/ygzkyv17/

＆＃13;

var renderer;
$(function() {
  renderer = new Highcharts.Renderer(
    $('#container')[0],
    400,
    300
  );
  drawCircle();
});

function drawCircle() {
  renderer.circle(200, 150, 40).attr({
    id: 'circle-1',
    fill: {
      radialGradient: {
        cx: 0.5,
        cy: 0.5,
        r: 0.5
      },
      stops: [
        [0, 'none'],
        [0.5, 'rgba(0,0,0,0)'],
        [0.5, 'rgba(255,255,255,0.5)'],
        [1, 'rgba(0,0,0,0)']
      ]
    },
    stroke: 'black',
    'stroke-width': 1
  }).add();

}

＆＃13;

body {
  background-color: black;
}
#circle-1 {
  display: block;
  width: 40px;
  height: 40px;
  
  border-radius: 40px;
  opacity: 0;
  animation-name: scale;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes scale {
  0% {
    transform: translate(180px, 135px) scale(0.1);
    opacity: 0;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: translate(100px, 75px) scale(0.5);
    opacity: 1;
    box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0;
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 500px"></div>

＆＃13;

在Highmap

1 个答案: