如何为OpenLayers3中的功能设置动画？

Question

我正在使用openlayers3并尝试对ol进行动画处理。功能：

var point = new ol.Feature({
    geometry: new ol.geom.Point([0, 0])),
    name: 'test',
});

我希望这一点发牢骚。 在OpenLayers2中，我在功能的svgR属性上使用了jQuery动画。 我如何在OpenLayers3中做到这一点？ 我已经用demo创建了一个jsFiddle。

Answer 1

您可以使用以下代码：

http://acanimal.github.io/thebookofopenlayers3/chapter06_02_markers_overlays.html

使用ol.Overlay和CSS来显示动画。

我不知道通过特征/矢量层实现相似效果的简单方法。

Answer 2

我已经使用map.on（'postcompose'）事件实现了脉动动画。 解决方法如下：

var animate = function (pulsateCount) {
    var style = point.getStyle(),
        image = style.getImage(),
        r = image.getRadius(),
        currR = r,
        maxR = 2 * r,
        sign = 1;
    vectorLayer.getSource().removeFeature(point);

    var pulsate = function (event) {
        var vectorContext = event.vectorContext;
        if (currR > maxR) {
            sign = -1;
            pulsateCount--;
        } else if (currR < r) {
            sign = 1;
            if (!pulsateCount) {
                map.un('postcompose', pulsate);
                vectorLayer.getSource().addFeature(point);
                return;
            }
        }
        currR += sign * 0.1;
        vectorContext.drawFeature(point, new ol.style.Style({
            image: new ol.style.Circle({
                radius: currR,
                fill: image.getFill(),
                stroke: image.getStroke()
            })
        }));
        map.render();
    };

    map.on('postcompose', pulsate);
};

和摆弄 。 它工作正常，但看起来像一个hack，所以我不喜欢它。 我想应该有更清洁的解决方案，但我找不到。 我的答案是针对OpenLayers v3.0.0-beta.5的

Answer 3

要沿路线设置标记动画，请使用setInterval更改ol.Overlay的位置。

这是一个小样的演示 。

Answer 4

像Philipp一样，我也使用以下链接作为动画功能的参考。

http://www.acuriousanimal.com/thebookofopenlayers3/chapter06_02_markers_overlays.html

这是一个JSFiddle演示 。 它基本上是将一个CSS3动画类添加到div并将其附加到开放层叠加层。

CSS

.pulsate {
  border: 10px solid red;
  background: tranparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: pulse 1s ease-out;
  -moz-animation: pulse 1s ease-out;
  animation: pulse 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0;
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -moz-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

JS

 var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.transform([-87.623177, 41.881832], 'EPSG:4326', 'EPSG:3857'),
        zoom: 8

      })
    });

var dummyFeature = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-87.89760243,
        41.89884569
      ]
    },
    "id": 12345,
    "properties": {
      "owner": "ABC",
      "mta": 3
    }
  }]
};

function pointToProj(coordinates) {
  var lon = parseFloat(coordinates[0]);
  var lat = parseFloat(coordinates[1]);
  return ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857');
}

function pulsatingCircleAnimation(coor) {
  var element = document.createElement('div');
  element.setAttribute('class', 'pulsate');
  var coorProjection = pointToProj(coor);
  return new ol.Overlay({
    element: element,
    position: coorProjection,
    positioning: 'center-center',
    offset: [1, 1]
  });
}

//Adds the animated div to the ol overlay and returns the same

function addAnimation(feature) {
  var coordinates;
  var overlay;
  coordinates = feature.geometry.coordinates;
  overlay = pulsatingCircleAnimation(coordinates);
  map.addOverlay(overlay);
}



addAnimation(dummyFeature.features[0]);

map.updateSize();