chore: adjust demo animation

VisActor · Dec 23, 2024 · 22be845 · 22be845
1 parent 56689ed
commit 22be845
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 12 deletions.
diff --git a/docs/assets/examples/en/infographic/bar-chart-horizontal.md b/docs/assets/examples/en/infographic/bar-chart-horizontal.md
@@ -22,10 +22,32 @@ const dsl = {
           id: 'defaultScene',
           actions: [
             {
-              characterId: ['bgImage', 'bg0', 'bg1', 'title', 'chart', 'displayImage'],
+              characterId: ['bgImage', 'bg0', 'bg1'],
               characterActions: [
                 {
-                  action: 'appear'
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['title', 'chart', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        duration: 500,
+                        easing: 'linear',
+                        effect: 'wipe'
+                      }
+                    }
+                  ]
                 }
               ]
             }

diff --git a/docs/assets/examples/en/infographic/pie-chart-camera.md b/docs/assets/examples/en/infographic/pie-chart-camera.md
@@ -2,7 +2,7 @@
 category: examples
 group: infographic
 title: Pie Chart Camera
-keywords: templates, visualization, bar, left-right, comparison, horizontal
+keywords: templates, visualization, bar, percentage, horizontal
 order: 1-0
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/pie-chart-camera.png
 ---
@@ -19,14 +19,34 @@ const dsl = {
       id: 'defaultAct',
       scenes: [
         {
-import { CustomInfographic } from './demos/infographic/bar';
           id: 'defaultScene',
           actions: [
             {
-              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'chart', 'displayImage'],
+              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'displayImage'],
               characterActions: [
                 {
-                  action: 'appear'
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500,
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['chart'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        startTime: 300,
+                        duration: 1000,
+                      }
+                    }
+                  ]
                 }
               ]
             }

diff --git a/docs/assets/examples/zh/infographic/bar-chart-horizontal.md b/docs/assets/examples/zh/infographic/bar-chart-horizontal.md
@@ -22,10 +22,32 @@ const dsl = {
           id: 'defaultScene',
           actions: [
             {
-              characterId: ['bgImage', 'bg0', 'bg1', 'title', 'chart', 'displayImage'],
+              characterId: ['bgImage', 'bg0', 'bg1'],
               characterActions: [
                 {
-                  action: 'appear'
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['title', 'chart', 'displayImage'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        duration: 500,
+                        easing: 'linear',
+                        effect: 'wipe'
+                      }
+                    }
+                  ]
                 }
               ]
             }

diff --git a/docs/assets/examples/zh/infographic/pie-chart-camera.md b/docs/assets/examples/zh/infographic/pie-chart-camera.md
@@ -2,7 +2,7 @@
 category: examples
 group: infographic
 title: Pie Chart Camera
-keywords: templates, visualization, bar, left-right, comparison, horizontal
+keywords: templates, visualization, bar, percentage, horizontal
 order: 1-0
 cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vstory-infographic/preview/pie-chart-camera.png
 ---
@@ -19,14 +19,34 @@ const dsl = {
       id: 'defaultAct',
       scenes: [
         {
-import { CustomInfographic } from './demos/infographic/bar';
           id: 'defaultScene',
           actions: [
             {
-              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'chart', 'displayImage'],
+              characterId: ['bgImage', 'cameraIcon', 'bg0', 'bg1', 'title', 'displayImage'],
               characterActions: [
                 {
-                  action: 'appear'
+                  action: 'appear',
+                  payload: {
+                    animation: {
+                      duration: 500,
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              characterId: ['chart'],
+              characterActions: [
+                {
+                  action: 'appear',
+                  payload: [
+                    {
+                      animation: {
+                        startTime: 300,
+                        duration: 1000,
+                      }
+                    }
+                  ]
                 }
               ]
             }