docs: add line animate demo

examples/line/animate/demo/arcCircle.js

@@ -0,0 +1,38 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 0,
+    style: 'dark',
+    center: [ 107.77791556935472, 35.443286920228644 ],
+    zoom: 2.9142882493605033
+  })
+});
+scene.on('loaded', () => {
+  fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+    .then(res => res.text())
+    .then(data => {
+      const layer = new LineLayer({
+        blend: 'normal'
+      })
+        .source(data, {
+          parser: {
+            type: 'csv',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2'
+          }
+        })
+        .size(1)
+        .shape('greatcircle')
+        .animate(true)
+        .color('#8C1EB2')
+        .style({
+          opacity: 0.8
+        });
+      scene.addLayer(layer);
+    });
+});

examples/line/animate/demo/meta.json

@@ -0,0 +1,25 @@
+{
+  "title": {
+    "zh": "弧线",
+    "en": "line"
+  },
+  "demos": [
+    {
+      "filename": "arcCircle.js",
+      "title": "大圆弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*6Qm_QY69sBMAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "trip_arc_dark.js",
+      "title": "3D 弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*JjUcTZ8-PC8AAAAAAAAAAABkARQnAQ"
+
+    },
+    {
+      "filename": "trip_arc.js",
+      "title": "3D 弧线",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*xvaaQo2c0gMAAAAAAAAAAABkARQnAQ"
+
+    }
+  ]
+}

examples/line/animate/demo/trip_arc.js

@@ -0,0 +1,44 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 60,
+    type: 'mapbox',
+    style: 'light',
+    center: [ -74.06967, 40.720399 ],
+    zoom: 12.45977
+  })
+});
+scene.on('loaded', () => {
+  fetch(
+    'https://gw.alipayobjects.com/os/basement_prod/bd33a685-a17e-4686-bc79-b0e6a89fd950.csv'
+  )
+    .then(res => res.text())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data, {
+          parser: {
+            type: 'csv',
+            x: 'start station longitude',
+            y: 'start station latitude',
+            x1: 'end station longitude',
+            y1: 'end station latitude'
+          }
+        })
+        .size(1)
+        .shape('arc3d')
+        .color('#0C47BF')
+        .animate({
+          interval: 0.4,
+          trailLength: 0.2,
+          duration: 1
+        })
+        .style({
+          opacity: 1,
+          blur: 0.9
+        });
+      scene.addLayer(layer);
+    });
+});

examples/line/animate/demo/trip_arc_dark.js

@@ -0,0 +1,37 @@
+import { Scene, LineLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 60,
+    style: 'dark',
+    center: [ 104.34278, 41.12554 ],
+    zoom: 2.94888,
+    rotation: 42.3999
+  })
+});
+scene.on('loaded', () => {
+  fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt')
+    .then(res => res.text())
+    .then(data => {
+      const layer = new LineLayer({})
+        .source(data, {
+          parser: {
+            type: 'csv',
+            x: 'lng1',
+            y: 'lat1',
+            x1: 'lng2',
+            y1: 'lat2'
+          }
+        })
+        .size(1)
+        .shape('arc3d')
+        .color('#FF7C6A')
+        .animate(true)
+        .style({
+          opacity: 0.8
+        });
+      scene.addLayer(layer);
+    });
+});

examples/line/animate/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Line Animate
+order: 1
+---

examples/line/animate/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 线动画
+order: 1
+---

stories/Layers/components/Arc2DLine.tsx

@@ -35,8 +35,9 @@ export default class Arc2DLineDemo extends React.Component {
           y: 'lat2',
         },
       })
-      .size(3)
+      .size(1)
       .shape('arc')
+      .animate(true)
       .color('#8C1EB2')
       .style({
         opacity: 1,