性能优化标记动画

Performance Optimize Marker Animation

本文关键字：动画 优化 性能      更新时间：2023-09-26

我有一个Openlayers应用程序，它在用户的当前位置上有一个标记。

标记的动画看起来不错，但我的机器性能非常高，有什么方法可以优化这个功能的性能吗？

function pulsate(feature, style, duration) {
  var start = new Date().getTime();
  var key = map.on('postcompose', function(event) {
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    var flashGeom = feature.getGeometry().clone();
    var elapsed = frameState.time - start;
    var elapsedRatio = elapsed / duration;
    var radius = ol.easing.easeOut(elapsedRatio) * 35 + 5;
    var opacity = ol.easing.easeOut(1 - elapsedRatio);
    var fillOpacity = ol.easing.easeOut(0.5 - elapsedRatio)
    vectorContext.setStyle(new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: "rgba(255, 0, 0, " + fillOpacity + ")"
        }),
        stroke: new ol.style.Stroke({
          color: "rgba(255, 0, 0, " + fillOpacity + ")",
          width: 3 + opacity
        })
      })
    }));
    vectorContext.drawGeometry(flashGeom);
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(feature.getGeometry());
    if (elapsed > duration) {
      ol.Observable.unByKey(key);
      pulsate(feature, style, duration); // recursive function
    }
    map.render();
  });
}

下面是一个用来玩的JSFiddle：http://jsfiddle.net/4arb5ka1/1/

不要总是渲染贴图，而是设置一个间隔计时器，根据经过的时间更改功能的样式。这样，当什么都没有真正改变时，就不会一直渲染贴图。

const feature = ... // get the event you want to animate from OL
const renderInterval = 100 // ms
setInterval(pulsate, renderInterval)
function pulsate() {
    var style = ... // set your style as needed, depending on elapsed time
    feature.setStyle(style)
    map.render()
}
相关文章：