Javascript 如何在OpenLayers3中设置功能动画？

我正在使用openlayers3并尝试制作ol动画。功能：

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

我想让这一点跳动。在OpenLayers2中，我在feature的svgR属性上使用了jQuery animate。如何在OpenLayers3中执行此操作？

---

我用创建了一个JSFIDLE。

我使用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);
};

var animate=函数（脉动计数）{
var style=point.getStyle（），
image=style.getImage（），
r=image.getRadius（），
currR=r，
maxR=2*r，
符号=1；
vectorLayer.getSource（）.removeFeature（点）；
var脉动=功能（事件）{
var vectorContext=event.vectorContext；
如果（电流>最大电流）{
符号=-1；
脉动计数--；
}否则如果（电流

---

和。它工作得很好，但看起来像一个黑客，所以我不喜欢它。我想应该有更干净的解决办法，但我找不到。对于OpenLayers v3.0.0-beta.5，我的答案是实际的。我已经使用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);
};

var animate=函数（脉动计数）{
var style=point.getStyle（），
image=style.getImage（），
r=image.getRadius（），
currR=r，
maxR=2*r，
符号=1；
vectorLayer.getSource（）.removeFeature（点）；
var脉动=功能（事件）{
var vectorContext=event.vectorContext；
如果（电流>最大电流）{
符号=-1；
脉动计数--；
}否则如果（电流

---

和。它工作得很好，但看起来像一个黑客，所以我不喜欢它。我想应该有更干净的解决办法，但我找不到。我的答案适用于OpenLayers v3.0.0-beta.5。您可以使用以下代码：

它使用ol.Overlay和css来显示动画

---

我不知道通过功能/矢量层实现类似功能的简单方法。

您可以使用以下代码：

它使用ol.Overlay和css来显示动画

---

不过，我不知道通过功能/矢量层实现类似功能的简单方法。

要沿路线设置标记动画，我使用

setInterval

更改

ol.Overlay

的位置

---

.

要沿路线设置标记动画，我使用

setInterval

更改

ol.Overlay

的位置

---

.

像Philipp一样，我也使用下面的链接作为动画制作的参考

这是一本书。它基本上是将CSS3动画类添加到div并将其附加到开放层覆盖

CSS

JS

---

和Philipp一样，我也使用下面的链接作为动画制作的参考

这是一本书。它基本上是将CSS3动画类添加到div并将其附加到开放层覆盖

CSS

JS

---

你认为什么是破解，后期合成部分？我希望我可以控制功能动画，使用ol.feature界面，现在我必须每次重新绘制新功能。你认为什么是破解，后期合成部分？我希望我可以控制功能动画，使用ol.feature界面，现在我必须每次重新绘制新功能。

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