docs: add animate demo

docs/api/layer/line_layer/arc.en.md

@@ -0,0 +1,75 @@
+---
+title: 弧线图
+order: 1
+---
+将两个点的连线绘制成弧形，绘制的弧线可以是贝塞尔曲线，大圆航线，通常用来表示两种地理事物关系和联系，或者人口迁移，物流起点目的地等
+
+## 使用
+
+### 数据
+绘制弧线只需提供起始点坐标即可
+
+```javascript
+ source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+```
+
+### shape
+
+弧线支持两种弧线算法
+
+- arc 绘制弧线 通过贝塞尔曲线算法技术弧线
+- greatcircle 大圆航线，地图两个点的最近距离不是两个点连线，而是大圆航线
+- arc3d 3d 弧线地图 3D 视角
+
+
+### 示例代码
+
+```javascript
+const layer = new LineLayer({})
+      .source(data, {
+        parser: {
+          type: 'csv',
+          x: 'lng1',
+          y: 'lat1',
+          x1: 'lng2',
+          y1: 'lat2'
+        }
+      })
+      .size(1)
+      .shape('arc')
+      .color('#8C1EB2')
+      .style({
+        opacity: 0.8,
+      });
+```
+### animate
+
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+
+#### 设置动画参数
+
+- duration 动画时间 单位(s)秒
+- interval 轨迹间隔, 取值区间 0 - 1
+- trailLength 轨迹长度 取值区间 0 - 1
+
+```javascript
+layer.animate({
+  duration: 4,
+  interval: 0.2,
+  trailLength: 0.1
+  
+})
+```

docs/api/layer/line_layer/path.zh.md

@@ -23,4 +23,27 @@ shape 设置成line即可绘制路线图
 ```
 ### animate
 
+#### 开启关闭动画
+
+```javascript
+layer.animate(true)
+layer.animate(false)
+```
+
+#### 设置动画参数
+
+- duration 动画时间 单位(s)秒
+- interval 轨迹间隔, 取值区间 0 - 1
+- trailLength 轨迹长度 取值区间 0 - 1
+
+```javascript
+layer.animate({
+  duration: 4,
+  interval: 0.2,
+  trailLength: 0.1
+  
+})
+```
+
+
 

examples/gallery/animate/demo/animate_line.js

@@ -4,7 +4,7 @@ const scene = new Scene({
   id: 'map',
   map: new Mapbox({
     center: [ -74.006, 40.7128 ],
-    zoom: 15,
+    zoom: 14,
     style: 'dark'
   })
 });
@@ -27,9 +27,9 @@ fetch(
         return `rgb(${v[0]})`;
       })
       .animate({
-        interval: 0.5,
-        trailLength: 0.4,
-        duration: 4
+        interval: 0.1,
+        trailLength: 1.0,
+        duration: 2
       });
     scene.addLayer(lineLayer);
   });

examples/gallery/animate/demo/meta.json

@@ -0,0 +1,23 @@
+{
+  "title": {
+    "zh": "图库",
+    "en": "Gallery"
+  },
+  "demos": [
+    {
+      "filename": "animate.js",
+      "title": "轨迹动画",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "build.js",
+      "title": "点亮城市",
+      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "animate_line.js",
+      "title": "轨迹动画",
+      "screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*8cXXR5FxHgAAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/gallery/animate/demo/world.js

@@ -0,0 +1,78 @@
+/* eslint-disable no-eval */
+import { Scene, PolygonLayer, LineLayer, PointLayer } from '@antv/l7';
+import { Mapbox } from '@antv/l7-maps';
+
+const scene = new Scene({
+  id: 'map',
+  map: new Mapbox({
+    pitch: 40,
+    style: 'blank',
+    center: [ 3.438, 40.16797 ],
+    zoom: 0.51329
+  })
+});
+Promise.all([
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json').then(d => d.json()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json').then(d => d.text()),
+  fetch('https://gw.alipayobjects.com/os/basement_prod/a5ac7bce-181b-40d1-8a16-271356264ad8.json').then(d => d.text())
+]).then(function onLoad([ world, dot, flyline ]) {
+  const dotData = eval(dot);
+  const flydata = eval(flyline).map(item => {
+    const latlng1 = item.from.split(',').map(e => { return e * 1; });
+    const latlng2 = item.to.split(',').map(e => { return e * 1; });
+    return { coord: [ latlng1, latlng2 ] };
+  });
+  const worldFill = new PolygonLayer()
+    .source(world)
+    .color('#98E3FA')
+    .shape('fill')
+    .style({
+      opacity: 1
+    });
+
+  const worldLine = new LineLayer()
+    .source(world)
+    .color('#fff')
+    .size(0.6)
+    .style({
+      opacity: 1
+    });
+  const dotPoint = new PointLayer()
+    .source(dotData, {
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat'
+      }
+    })
+    .shape('circle')
+    .color('red')
+    .animate(true)
+    .size(40)
+    .style({
+      opacity: 1.0
+    });
+  const flyLine = new LineLayer()
+    .source(flydata, {
+      parser: {
+        type: 'json',
+        coordinates: 'coord'
+      }
+    })
+    .color('#faad14')
+    .shape('arc3d')
+    .size(2.0)
+    .animate({
+      interval: 0.1,
+      trailLength: 1.0,
+      duration: 2
+    })
+    .style({
+      opacity: 1
+    });
+  scene.addLayer(worldFill);
+  scene.addLayer(worldLine);
+  scene.addLayer(dotPoint);
+  scene.addLayer(flyLine);
+});
+

examples/gallery/animate/index.en.md

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

examples/gallery/animate/index.zh.md

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

examples/gallery/basic/demo/meta.json

@@ -4,16 +4,6 @@
     "en": "Gallery"
   },
   "demos": [
-    {
-      "filename": "animate.js",
-      "title": "轨迹动画",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*-x3uRY5G_4sAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "build.js",
-      "title": "点亮城市",
-      "screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*InPpTbVN-yUAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "column_dark.js",
       "title": "3D柱图深色",

examples/gallery/basic/index.zh.md

@@ -1,4 +1,4 @@
 ---
-title: 官方精品库
+title: 基础可视化
 order: 0
 ---

examples/point/bubble/demo/scatter.js

@@ -27,8 +27,8 @@ fetch(
       .shape('circle')
       .active(true)
       .animate(true)
-      .size(40)
-      .color('#ffa842')
+      .size(56)
+      .color('#4cfd47')
       .style({
         opacity: 1
       });

examples/point/text/demo/point_text.js

@@ -23,15 +23,15 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
         }
       })
       .shape('m', 'text')
-      .size(18)
-      .color('w', [ '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac' ])
+      .size(12)
+      .color('w', [ '#0e0030', '#0e0030', '#0e0030' ])
       .style({
         textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
         textOffset: [ 0, 0 ], // 文本相对锚点的偏移量 [水平, 垂直]
         spacing: 2, // 字符间距
         padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-        stroke: 'red', // 描边颜色
-        strokeWidth: 1, // 描边宽度
+        stroke: '#ffffff', // 描边颜色
+        strokeWidth: 0.3, // 描边宽度
         strokeOpacity: 1.0
       });