OpenLayers 实现动态样式闪烁动画效果?

Question

openlaleyrs实现动态样式利用postrender事件实现闪烁动画效果，获取半径值时返回了负值？

版本：
"d3-ease": "^3.0.1",
"ol": "6.14.1",
"ol-ext": "^4.0.18",
开发过程中参考

mounted() {
    this.$nextTick(() => {
      // 通过 DOM API 更新文本
    this.initMap(); //初始化地图方法
    this.interval = setInterval(() => {
      this.addPoint();
    }, 1000);
    })
  },

methods: {
initMap() {
      console.log("初始化地图")
      var projection = get(this.$mapConfig.epsg);
      this.source = new VectorSource();
      this.source_td = new VectorSource();
      this.locationLayer = new VectorSource();
      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            name: "地图",
            visible: true,
            source: new XYZ({
              minZoom: this.$mapConfig.minZoom,
              maxZoom: this.$mapConfig.maxZoom,
              projection: projection,
              tileSize: this.$mapConfig.tileSize,
              url: this.mapurl+"/{z}/{x}/{y}"+ this.$mapConfig.format,
              //url: "http://"+IP+":"+this.mapurl.split(':')[2]+"/{z}/{x}/{y}"+ this.$mapConfig.format,
            }),
          }),
        ],
        view: new View({
          center: transform([this.$mapConfig.centX, this.$mapConfig.centY], "EPSG:4326", this.$mapConfig.epsg),
          projection: projection,
          minZoom: this.$mapConfig.minZoom,
          maxZoom: this.$mapConfig.maxZoom,
          zoom: 16,
        }),
      });
       
      var _this = this;
      this.point_Source = new VectorSource();
      this.point_Source.on('addfeature', function (e) {
          console.log("调用方法")
            _this.flash(e.feature);
        });
        this.point_Layer = new VectorLayer({
            source: this.point_Source
        });
        _this.map.addLayer(this.point_Layer);
    },

addPoint() {
      debugger;
      var _this = this;
      if(_this.point_Layer){
        _this.point_Layer.getSource().clear();
      }
      for (var i in _this.pointOptions) {
        var point = [];
        point.push(parseFloat(_this.pointOptions[i].x));
        point.push(parseFloat(_this.pointOptions[i].y));
        var extent = transform(point, 'EPSG:4326', _this.$mapConfig.epsg);
        console.log("extent：："+JSON.stringify(extent))
        var pointFeature = new Feature({
          geometry: new Point(extent)
        });
        //console.log(modetype);
        pointFeature.setStyle(
          new Style({
          //边线颜色
          stroke: new Style({
            color: '#4a8fff',
            width: 2
          }),
          //形状
          image: new Circle({
            radius: 8,
            fill: new Fill({
              color: '#4a8fff'
            })
          })
        }));
          _this.point_Layer.getSource().addFeature(pointFeature);
      }
    },
},
flash(feature) {
      var _this = this
      var start = new Date().getTime();
      var listenerKey;
      function animate(event) {
        var duration = 1000;
        const vectorContext = getVectorContext(event);
        var frameState = event.frameState;
        var flashGeom = feature.getGeometry().clone();
        var elapsed = frameState.time - start;
        var elapsedRatio = elapsed / duration;
        var radius = d3.easeQuadOut(elapsedRatio) * 25 + 5;
        var opacity = d3.easeQuadOut(1 - elapsedRatio);
        var style = new Style({
          image: new Circle({
            radius: radius,
            snapToPixel: false,
            stroke: new Stroke({
              color: 'rgba(255, 0, 0, ' + opacity + ')',
              width: 0.25 + opacity
            })
          })
        });
        vectorContext.setStyle(style);
        vectorContext.drawGeometry(flashGeom);
        if (elapsed > duration) {
          _this.point_Layer.un('postrender',listenerKey);
          return;
        } else {
        }
        _this.map.render();
      }
      listenerKey = _this.point_Layer.on('postrender', animate);
    },