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

Question

我正在使用 openlayers3 并尝试为 ol.Feature 设置动画：

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

我想让这一点跳动。在 OpenLayers2 中，我在功能的 svgR 属性上使用了 jQuery animate。如何在 OpenLayers3 中做到这一点？我用demo创建了一个 jsFiddle 。

Answer 1

您可以使用以下代码：

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

它使用 ol.Overlay(s) 和 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);
};

和小提琴。它工作正常，但它看起来像一个黑客，所以我不喜欢它。我想应该有更清洁的解决方案，但我找不到。我的回答是 OpenLayers v3.0.0-beta.5 的实际答案

Answer 3

为了沿路线设置标记的动画，我setInterval用来更改ol.Overlay.

这是一个 plunker 演示。

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();