From 725d2f8fa2e535bc8377fc99d411c75f0ca1074c Mon Sep 17 00:00:00 2001
From: shihui <yiqianyao.yqy@alibaba-inc.com>
Date: Thu, 23 Dec 2021 14:01:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=203D=20=E6=9F=B1?=
 =?UTF-8?q?=E5=9B=BE=E7=9A=84=20demo=20=E5=92=8C=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/layer/point_layer/column.zh.md         | 16 ++++++++++++++++
 examples/gallery/basic/demo/column_dark.js      |  3 ++-
 examples/point/column/demo/clumn_shape.js       |  3 ++-
 examples/point/column/demo/clumn_shape_light.js |  1 +
 examples/point/column/demo/column_dark.js       |  5 +++--
 examples/point/column/demo/column_linear.js     |  1 +
 6 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/docs/api/layer/point_layer/column.zh.md b/docs/api/layer/point_layer/column.zh.md
index 2e8783c9ee..7fe7c1a0f8 100644
--- a/docs/api/layer/point_layer/column.zh.md
+++ b/docs/api/layer/point_layer/column.zh.md
@@ -58,7 +58,23 @@ const column = new PointLayer({})
     opacity: 1.0,
   });
 ```
+### animate
+ 3D 柱图支持生长动画  
+animate 方法支持的布尔值和对象参数
 
+ 
+```javascript
+animate(true)
+animate(false)
+
+animate(animateOptions)
+
+animateOptions: {
+  enable: boolean;
+  speed?: number = 0.01;
+  repeat?: number = 1;
+}
+```
 ## 额外的 style 配置
 
 - sourceColor 设置 3D 柱图起始颜色（3D 柱图设置颜色渐变时会覆盖 color 设置的颜色）
diff --git a/examples/gallery/basic/demo/column_dark.js b/examples/gallery/basic/demo/column_dark.js
index fc861edf0c..708200fe16 100644
--- a/examples/gallery/basic/demo/column_dark.js
+++ b/examples/gallery/basic/demo/column_dark.js
@@ -24,8 +24,9 @@ scene.on('loaded', () => {
         })
         .shape('cylinder')
         .size('t', function(level) {
-          return [ 1, 2, level * 2 + 20 ];
+          return [ 2, 2, level * 2 + 20 ];
         })
+        .animate(true)
         .active(true)
         .color('t', [
           '#094D4A',
diff --git a/examples/point/column/demo/clumn_shape.js b/examples/point/column/demo/clumn_shape.js
index c635e3d282..aafb5542ab 100644
--- a/examples/point/column/demo/clumn_shape.js
+++ b/examples/point/column/demo/clumn_shape.js
@@ -8,7 +8,7 @@ const scene = new Scene({
     style: 'dark',
     center: [ 121.400257, 31.25287 ],
     zoom: 14.55,
-    rotation: 134.9507
+    rotation: 134.95
   })
 });
 scene.on('loaded', () => {
@@ -25,6 +25,7 @@ scene.on('loaded', () => {
             y: 'latitude'
           }
         })
+        .animate(true)
         .active(true)
         .shape('name', [
           'cylinder',
diff --git a/examples/point/column/demo/clumn_shape_light.js b/examples/point/column/demo/clumn_shape_light.js
index 6ed351b690..37feef6450 100644
--- a/examples/point/column/demo/clumn_shape_light.js
+++ b/examples/point/column/demo/clumn_shape_light.js
@@ -31,6 +31,7 @@ scene.on('loaded', () => {
           'hexagonColumn',
           'squareColumn'
         ])
+        .animate(true)
         .active(true)
         .size('unit_price', h => {
           return [ 6, 6, h / 500 ];
diff --git a/examples/point/column/demo/column_dark.js b/examples/point/column/demo/column_dark.js
index fc861edf0c..4d611c0980 100644
--- a/examples/point/column/demo/column_dark.js
+++ b/examples/point/column/demo/column_dark.js
@@ -4,7 +4,7 @@ import { GaodeMap } from '@antv/l7-maps';
 const scene = new Scene({
   id: 'map',
   map: new GaodeMap({
-    pitch: 35.210526315789465,
+    pitch: 40,
     style: 'dark',
     center: [ 104.288144, 31.239692 ],
     zoom: 4.4
@@ -24,8 +24,9 @@ scene.on('loaded', () => {
         })
         .shape('cylinder')
         .size('t', function(level) {
-          return [ 1, 2, level * 2 + 20 ];
+          return [ 2, 2, level * 2 + 20 ];
         })
+        .animate(true)
         .active(true)
         .color('t', [
           '#094D4A',
diff --git a/examples/point/column/demo/column_linear.js b/examples/point/column/demo/column_linear.js
index 2dc6d0ac17..22431795b4 100644
--- a/examples/point/column/demo/column_linear.js
+++ b/examples/point/column/demo/column_linear.js
@@ -27,6 +27,7 @@ scene.on('loaded', () => {
         .size('t', function(level) {
           return [ 1, 1, level * 2 + 20 ];
         })
+        .animate(true)
         .active(true)
         .color('#006CFF')
         .style({