docs(demo): add lottie #4221 (#4262)

site/.dumi/global.ts

@@ -5,6 +5,7 @@ if (window) {
   (window as any).d3Array = require('d3-array');
   (window as any).d3GeoProjection = require('d3-geo-projection');
   (window as any).topojson = require('topojson');
+  (window as any).gLottiePlayer = require('@antv/g-lottie-player');
   (window as any).webfontloader = require('webfontloader');
   (
     window as any

site/examples/others/animation/demo/lottie.ts

@@ -0,0 +1,37 @@
+import { Chart } from '@antv/g2';
+import { loadAnimation } from '@antv/g-lottie-player';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .interval()
+  .data([
+    { genre: 'Sports', sold: 275 },
+    { genre: 'Strategy', sold: 115 },
+    { genre: 'Action', sold: 120 },
+    { genre: 'Shooter', sold: 350 },
+    { genre: 'Other', sold: 150 },
+  ])
+  .encode('x', 'genre')
+  .encode('y', 'sold')
+  .encode('color', 'genre')
+  .animate('enter', { type: 'fadeIn', duration: 1000 })
+  .animate('exit', { type: 'fadeOut', duration: 2000 });
+
+chart.render();
+
+(async () => {
+  const { canvas } = chart.context();
+  await canvas.ready;
+
+  const lottieJSON = await fetch(
+    'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/file/A*C9f6TaadHikAAAAAAAAAAAAADmJ7AQ',
+  ).then((res) => res.json());
+  const animation = loadAnimation(lottieJSON, { loop: true, autoplay: true });
+  const wrapper = animation.render(canvas);
+  wrapper.scale(0.5);
+  wrapper.translate(160, 100);
+})();

site/examples/others/animation/demo/meta.json

@@ -51,6 +51,14 @@
         "en": "ZoomIn"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/raptor/1667976930984/zoomIn.gif"
+    },
+    {
+      "filename": "lottie.ts",
+      "title": {
+        "zh": "Lottie",
+        "en": "Lottie"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/raptor/1668077308397/Nov-10-2022%25252018-48-07.gif"
     }
   ]
-}
+}

site/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@antv/dumi-theme-antv": "^0.3.0-beta.5",
+    "@antv/g-lottie-player": "^0.0.13",
     "@antv/g-plugin-rough-canvas-renderer": "^1.7.27",
     "@antv/g-plugin-a11y": "^0.4.27",
     "d3-array": "^3.2.0",