docs: add pointanimate demo

examples/gallery/basic/demo/column_dark.js

@@ -26,6 +26,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
       .size('t', function(level) {
         return [ 1, 2, level * 2 + 20 ];
       })
+      .active(true)
       .color('t', [
         '#094D4A',
         '#146968',

packages/layers/src/line/models/line.ts

@@ -21,7 +21,7 @@ export default class LineModel extends BaseModel {
   public getUninforms(): IModelUniform {
     const {
       opacity,
-      lineType = lineStyleType.solid,
+      lineType = 'solid',
       dashArray = [10, 5],
     } = this.layer.getLayerConfig() as ILineLayerStyleOptions;
     return {

packages/layers/src/point/shaders/fill_frag.glsl

@@ -1,3 +1,5 @@
+#define Animate 0.0
+
 uniform float u_blur : 0;
 uniform float u_opacity : 1;
 uniform float u_stroke_width : 1;
@@ -8,6 +10,7 @@ varying vec4 v_data;
 varying vec4 v_color;
 varying float v_radius;
 uniform float u_time;
+uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ];
 
 #pragma include "sdf_2d"
 #pragma include "picking"
@@ -65,11 +68,16 @@ void main() {
   float PI = 3.14159;
   float N_RINGS = 3.0;
   float FREQ = 1.0;
-  // float intensity = 1.0;
-  float intensity = clamp(cos(r * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (r * 2.0 * N_RINGS - FREQ * u_time / 1000.)), 0.0, 1.0);
+
+
 
   gl_FragColor = opacity_t * mix(vec4(v_color.rgb, v_color.a * u_opacity), strokeColor * u_stroke_opacity, color_t);
-  // gl_FragColor = vec4(gl_FragColor.xyz * intensity, intensity);
+
+  if(u_aimate.x == Animate) {
+    float d = length(v_data.xy);
+    float intensity = clamp(cos(d * PI), 0.0, 1.0) * clamp(cos(2.0 * PI * (d * 2.0 * N_RINGS - FREQ * u_time)), 0.0, 1.0);
+    gl_FragColor = vec4(gl_FragColor.xyz * intensity, intensity);
+  }
 
   gl_FragColor = filterColor(gl_FragColor);
 }

stories/Layers/Layers.stories.tsx

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
+import AnimatePoint from './components/AnimatePoint';
 import Arc2DLineDemo from './components/Arc2DLine';
 import ArcLineDemo from './components/Arcline';
 import CityBuildingLayerDemo from './components/citybuilding';
@@ -22,6 +23,7 @@ storiesOf('图层', module)
   .add('点图层', () => <PointDemo />)
   .add('数据更新', () => <DataUpdate />)
   .add('亮度图', () => <LightDemo />)
+  .add('点动画', () => <AnimatePoint />)
   .add('3D点', () => <Point3D />)
   .add('文字', () => <TextLayerDemo />)
   .add('Column', () => <Column />)

stories/Layers/components/AnimatePoint.tsx

@@ -0,0 +1,67 @@
+import { PointLayer, Scene } from '@antv/l7';
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import * as React from 'react';
+// @ts-ignore
+import data from '../data/data.json';
+export default class AnimatePoint extends React.Component {
+  // @ts-ignore
+  private scene: Scene;
+
+  public componentWillUnmount() {
+    this.scene.destroy();
+  }
+
+  public async componentDidMount() {
+    const scene = new Scene({
+      id: 'map',
+      map: new GaodeMap({
+        pitch: 0,
+        style: 'dark',
+        center: [112, 23.69],
+        zoom: 2.5,
+      }),
+    });
+
+    fetch(
+      'https://gw.alipayobjects.com/os/basement_prod/9078fd36-ce8d-4ee2-91bc-605db8315fdf.csv',
+    )
+      .then((res) => res.text())
+      .then((data) => {
+        const pointLayer = new PointLayer({})
+          .source(data, {
+            parser: {
+              type: 'csv',
+              x: 'Longitude',
+              y: 'Latitude',
+            },
+          })
+          .shape('circle')
+          .active(true)
+          .animate(true)
+          .size(40)
+          .color('#ffa842')
+          .style({
+            opacity: 1,
+          });
+
+        scene.addLayer(pointLayer);
+      });
+
+    this.scene = scene;
+  }
+
+  public render() {
+    return (
+      <div
+        id="map"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      />
+    );
+  }
+}

stories/Layers/components/Line.tsx

@@ -31,15 +31,15 @@ export default class LineDemo extends React.Component {
       })
       .size(3)
       .shape('line')
-      .color('red')
-      .animate({
-        interval: 0.5,
-        trailLength: 0.2,
-        duration: 4,
-      })
-      .style({
-        lineType: 'solid',
+      .color('color', (v) => {
+        return `rgb(${v[0]})`;
       });
+    // .animate({
+    //   enable: false,
+    //   interval: 0.5,
+    //   trailLength: 0.4,
+    //   duration: 4,
+    // })
 
     scene.addLayer(lineLayer);
     scene.render();