diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js
index b2c3ea49fe..d012a0f878 100644
--- a/examples/gallery/basic/demo/column_dark.js
+++ b/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',
diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts
index 287112a0bf..b34654eb0e 100644
--- a/packages/layers/src/line/models/line.ts
+++ b/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 {
diff --git a/packages/layers/src/point/shaders/fill_frag.glsl b/packages/layers/src/point/shaders/fill_frag.glsl
index c66d8ba62f..2e42a84e58 100644
--- a/packages/layers/src/point/shaders/fill_frag.glsl
+++ b/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);
 }
diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx
index b86b68a2fc..15e517af9d 100644
--- a/stories/Layers/Layers.stories.tsx
+++ b/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 />)
diff --git a/stories/Layers/components/AnimatePoint.tsx b/stories/Layers/components/AnimatePoint.tsx
new file mode 100644
index 0000000000..663a7788cf
--- /dev/null
+++ b/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,
+        }}
+      />
+    );
+  }
+}
diff --git a/stories/Layers/components/Line.tsx b/stories/Layers/components/Line.tsx
index c70aefa5fc..40b48f4618 100644
--- a/stories/Layers/components/Line.tsx
+++ b/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();