fix: animate time

examples/point/bubble/demo/scatter.js

@@ -4,15 +4,15 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    style: 'light',
-    center: [ -121.24357, 37.58264 ],
     pitch: 0,
-    zoom: 6.45
+    style: 'dark',
+    center: [ 112, 23.69 ],
+    zoom: 2.5
   })
 });
 
 fetch(
-  'https://gw.alipayobjects.com/os/basement_prod/6c4bb5f2-850b-419d-afc4-e46032fc9f94.csv'
+  'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv'
 )
   .then(res => res.text())
   .then(data => {
@@ -25,22 +25,12 @@ fetch(
         }
       })
       .shape('circle')
-      .size(4)
+      .active(true)
-      .color('Magnitude', [
+      .animate(true)
-        '#0A3663',
+      .size(40)
-        '#1558AC',
+      .color('#ffa842')
-        '#3771D9',
-        '#4D89E5',
-        '#64A5D3',
-        '#72BED6',
-        '#83CED6',
-        '#A6E1E0',
-        '#B8EFE2',
-        '#D7F9F0'
-      ])
       .style({
-        opacity: 0.5,
+        opacity: 1
-        strokeWidth: 0
       });
 
     scene.addLayer(pointLayer);

packages/layers/src/core/BaseLayer.ts

@@ -165,7 +165,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
 
   private scaleOptions: IScaleOptions = {};
 
-  private AnimateStartTime: number;
+  private animateStartTime: number;
+
+  private aniamateStatus: boolean = false;
 
   constructor(config: Partial<ILayerConfig & ChildLayerStyleOptions> = {}) {
     super();
@@ -309,6 +311,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     const { animateOption } = this.getLayerConfig();
     if (animateOption?.enable) {
       this.layerService.startAnimate();
+      this.aniamateStatus = true;
     }
     this.buildModels();
     // 触发初始化完成事件;
@@ -730,10 +733,21 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this.layerService.clock.getDelta();
   }
   public setAnimateStartTime() {
-    this.AnimateStartTime = this.layerService.clock.getElapsedTime();
+    this.animateStartTime = this.layerService.clock.getElapsedTime();
+  }
+  public stopAnimate() {
+    if (this.aniamateStatus) {
+      this.layerService.stopAnimate();
+      this.aniamateStatus = false;
+      this.updateLayerConfig({
+        animateOption: {
+          enable: false,
+        },
+      });
+    }
   }
   public getLayerAnimateTime(): number {
-    return this.layerService.clock.getElapsedTime() - this.AnimateStartTime;
+    return this.layerService.clock.getElapsedTime() - this.animateStartTime;
   }
 
   protected getConfigSchema() {

packages/layers/src/line/index.ts

@@ -5,8 +5,6 @@ import LineModels, { LineModelType } from './models';
 export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
   public type: string = 'LineLayer';
 
-  private animateStartTime: number = 0;
-
   protected getConfigSchema() {
     return {
       properties: {
@@ -49,12 +47,4 @@ export default class LineLayer extends BaseLayer<ILineLayerStyleOptions> {
     const shape = shapeAttribute?.scale?.field as LineModelType;
     return shape || 'line';
   }
-  // 拆分的动画插件
-  private initAnimate() {
-    const { enable } = this.animateOptions;
-    if (enable) {
-      this.layerService.startAnimate();
-      this.animateStartTime = this.layerService.clock.getElapsedTime();
-    }
-  }
 }

packages/layers/src/plugins/LayerAnimateStylePlugin.ts

@@ -20,6 +20,9 @@ export default class LayerAnimateStylePlugin implements ILayerPlugin {
   private readonly rendererService: IRendererService;
 
   public apply(layer: ILayer) {
+    // layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', () => {
+
+    // })
     layer.hooks.beforeRender.tap('LayerAnimateStylePlugin', () => {
       // 重新计算坐标系参数
       layer.models.forEach((model: IModel) => {