VisActor · neuqzxy · Aug 8, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 8, 2024
diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
@@ -23,44 +23,44 @@ export const VChartSiteDemo = () => {
     // 准备一个图表
     const tempSpec: IStorySpec = {
       characters: [
-        ...scene1Characters,
-        ...scene2Characters,
-        ...scene3Characters,
-        ...scene4Characters,
-        ...scene5Characters,
-        ...scene6Characters,
-        ...scene7Characters,
-        ...scene8Characters,
-        ...scene9Characters,
-        ...scene10Characters,
-        ...scene11Characters,
-        ...scene12Characters,
-        ...scene12_2_Characters,
-        ...scene13Characters
+        // ...scene1Characters,
        // ...scene2Characters,
+        // ...scene3Characters,
+        // ...scene4Characters,
+        // ...scene5Characters,
+        // ...scene6Characters,
+        // ...scene7Characters,
+        // ...scene8Characters,
+        // ...scene9Characters,
+        // ...scene10Characters,
+        // ...scene11Characters,
+        // ...scene12Characters,
+        ...scene12_2_Characters
+        // ...scene13Characters
       ],
       acts: [
         {
           id: 'default-chapter',
           scenes: [
-            scene1,
-            scene2,
-            scene3,
-            scene4,
-            scene5,
-            scene6,
-            scene7,
-            scene8,
-            scene9,
-            scene10,
-            scene11,
-            scene12,
-            scene12_2,
-            scene13
+            // scene1,
+            // scene2,
+            // scene3,
+            // scene4,
+            // scene5,
+            // scene6,
+            // scene7,
+            // scene8,
+            // scene9,
+            // scene10,
+            // scene11,
+            // scene12,
+            scene12_2
+            // scene13
           ]
         }
       ]
     };
-    console.log('dsl', tempSpec);
+    // console.log('dsl', tempSpec);
     const story = new Story(tempSpec, { dom: id, playerOption: { scaleX: 0.5, scaleY: 0.5 } });
     window.story = story;
     story.play();

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx
@@ -193,7 +193,7 @@ export const scene10Characters: ICharacterSpec[] = [
     }
   },
   {
-    type: 'RadarChart',
+    type: 'VChart',
     id: `scene10-radar-chart`,
     zIndex: 3,
     position: {
@@ -243,6 +243,7 @@ export const scene10: ISceneSpec = {
             animation: {
               duration: 500,
               easing: easeInOutQuad,
+              effect: 'move',
               move: {
                 from: 'right'
               }
@@ -396,6 +397,7 @@ scene10.actions.forEach(({ characterId, characterActions }) => {
         animation: {
           duration: 500,
           easing: easeInOutQuad,
+          effect: 'move',
           move: {
             to: 'bottom'
           },

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx
@@ -289,7 +289,7 @@ export const scene11Characters: ICharacterSpec[] = [
     }
   },
   {
-    type: 'WordCloudChart',
+    type: 'VChart',
     id: `scene11-wordcloud-chart`,
     zIndex: 0,
        position: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx
@@ -487,7 +487,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [
     }
   },
   {
-    type: 'SunburstChart',
+    type: 'VChart',
     id: `scene12_2-sunburst-chart`,
     zIndex: 1,
     position: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx
@@ -526,7 +526,7 @@ export const scene12Characters: ICharacterSpec[] = [
    }
   },
   {
-    type: 'TreeMapChart',
+    type: 'VChart',
     id: `scene12-treemap-chart`,
     zIndex: 1,
     position: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
@@ -239,7 +239,7 @@ export const scene8Characters: ICharacterSpec[] = [
     }
   },
   {
-    type: 'ScatterChart',
+    type: 'VChart',
     id: `scene8-chart`,
     zIndex: 0,
     position: {
@@ -358,8 +358,9 @@ export const scene8: ISceneSpec = {
             animation: {
               duration: 1500,
               easing: easeInOutElastic,
+              effect: 'move',
               move: {
-                from: 'bottom-left'
+                pos: 'bottom-left'
               }
             }
           }
@@ -377,7 +378,8 @@ export const scene8: ISceneSpec = {
             animation: {
               duration: 1500,
               easing: easeInOutElastic,
-              move: { from: 'top-right' }
+              effect: 'move',
+              move: { pos: 'top-right' }
             }
           }
         }
@@ -394,7 +396,8 @@ export const scene8: ISceneSpec = {
             animation: {
               duration: 1500,
               easing: easeInOutElastic,
-              move: { from: 'bottom-right' }
+              effect: 'move',
+              move: { pos: 'bottom-right' }
             }
           }
         }

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene9.tsx b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx
@@ -260,7 +260,7 @@ export const scene9Characters: ICharacterSpec[] = [
     }
   },
   {
-    type: 'RoseChart',
+    type: 'VChart',
     id: `scene9-rose-chart`,
     zIndex: 2,
     position: {
@@ -327,6 +327,7 @@ export const scene9: ISceneSpec = {
             animation: {
               duration: 500,
               easing: easeInOutQuad,
+              effect: 'move',
               move: {
                 from: 'right'
               }
@@ -421,18 +422,18 @@ export const scene9: ISceneSpec = {
             }
           }
         },
-        ...month.map((mon, i) => {
-          return {
-            action: 'add',
-            startTime: 2000 + (i + 1) * 200,
-            duration: 200,
-            payload: {
-              id: '1856Rose',
-              // @ts-ignore
-              values: monthData[mon]
-            }
-          };
-        }),
+        // ...month.map((mon, i) => {
+        //   return {
+        //     action: 'add',
+        //     startTime: 2000 + (i + 1) * 200,
+        //     duration: 200,
+        //     payload: {
+        //       id: '1856Rose',
+        //       // @ts-ignore
+        //       values: monthData[mon]
+        //     }
+        //   };
+        // }),
         {
           action: 'disappear',
           startTime: 5500,
@@ -463,6 +464,7 @@ scene9.actions.forEach(({ characterId, characterActions }) => {
         animation: {
           duration: 500,
           easing: easeInOutQuad,
+          effect: 'move',
           move: {
             to: 'left'
           }

diff --git a/packages/vstory/src/constants/action.ts b/packages/vstory/src/constants/action.ts
@@ -1,4 +1,5 @@
 export const ACTION_TYPE = {
   APPEAR: 'appear',
-  DISAPPEAR: 'disappear'
+  DISAPPEAR: 'disappear',
+  STYLE: 'style'
 };
diff --git a/packages/vstory/src/player/processor/chart/common/chartAppear.ts b/packages/vstory/src/player/processor/chart/common/chartAppear.ts
@@ -0,0 +1,22 @@
+import type { IChartVisibilityAction } from '../../interface/appear-action';
+import type { IGroup, ILine, IText } from '@visactor/vrender-core';
+import { commonFade, commonGrow } from './commonAppear';
+
+// TODO: 区分直角坐标系和极坐标系
+export const runChartAppear = (
+  instance: IGroup,
+  animation: IChartVisibilityAction['payload']['animation'],
+  option: { disappear: boolean }
+) => {
+  switch (animation.effect) {
+    case 'grow': {
+      return commonGrow(instance, animation, option);
+    }
+    case 'fade': {
+      return commonFade(instance, animation, option);
+    }
+    default: {
+      return commonFade(instance, animation, option);
+    }
+  }
+};
diff --git a/packages/vstory/src/player/processor/chart/common/commonAppear.ts b/packages/vstory/src/player/processor/chart/common/commonAppear.ts
@@ -0,0 +1,27 @@
+import type { IGroup } from '@visactor/vrender-core';
+import type { IChartVisibilityAction } from '../../interface/appear-action';
+
+export const commonFade = (
+  instance: IGroup,
+  animation: IChartVisibilityAction['payload']['animation'],
+  option: { disappear: boolean }
+) => {
+  const { duration, easing } = animation;
+  const { disappear } = option;
+  const opacityMap = disappear ? { from: 1, to: 0 } : { from: 0, to: 1 };
+
+  instance.setAttributes({ baseOpacity: opacityMap.from });
+  instance.animate().to({ baseOpacity: opacityMap.to }, duration, easing);
+};
+export const commonGrow = (
+  instance: IGroup,
+  animation: IChartVisibilityAction['payload']['animation'],
+  option: { disappear: boolean }
+) => {
+  const { duration, easing } = animation;
+  const { disappear } = option;
+  const opacityMap = disappear ? { from: 1, to: 0 } : { from: 0, to: 1 };
+
+  instance.setAttributes({ scaleX: opacityMap.from, scaleY: opacityMap.from });
+  instance.animate().to({ scaleX: opacityMap.to, scaleY: opacityMap.to }, duration, easing);
+};
diff --git a/packages/vstory/src/player/processor/chart/component/axisAppear.ts b/packages/vstory/src/player/processor/chart/component/axisAppear.ts
@@ -1,11 +1,12 @@
-import type { IChartAppearAction } from '../../interface/appear-action';
-import { commonFade, commonGrow } from './commonAppear';
+import type { IChartVisibilityAction } from '../../interface/appear-action';
+import { commonFade } from '../common/commonAppear';
+import { commonGrow } from './commonAppear';
 import type { IGroup, ILine, IText } from '@visactor/vrender-core';
 
 // TODO: 区分直角坐标系和极坐标系
 export const runAxisAppear = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   switch (animation.effect) {
@@ -23,7 +24,7 @@ export const runAxisAppear = (
 
 function axisGrow(
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean; orient?: 'width' | 'height'; direction?: 'negative' | 'positive' }
 ) {
   const isGrid = instance.name?.includes('grid');
@@ -36,7 +37,7 @@ function axisGrow(
 
 function mainAxisGrow(
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean; orient?: 'width' | 'height'; direction?: 'negative' | 'positive' }
 ) {
   const { duration, easing } = animation;
@@ -118,7 +119,7 @@ function mainAxisGrow(
 
 function gridGrow(
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean; orient?: 'width' | 'height'; direction?: 'negative' | 'positive' }
 ) {
   if (instance) {

diff --git a/packages/vstory/src/player/processor/chart/component/commonAppear.ts b/packages/vstory/src/player/processor/chart/component/commonAppear.ts
@@ -1,9 +1,9 @@
 import type { IGroup } from '@visactor/vrender-core';
-import type { IChartAppearAction } from '../../interface/appear-action';
+import type { IChartVisibilityAction } from '../../interface/appear-action';
 
 export const commonGrow = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean; orient?: 'width' | 'height' }
 ) => {
   const { duration, easing } = animation;
@@ -34,7 +34,7 @@ export const commonGrow = (
 
 export const commonFade = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   const { duration, easing } = animation;
@@ -46,7 +46,7 @@ export const commonFade = (
 
 export const runAppearOrDisAppear = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   switch (animation.effect) {

diff --git a/packages/vstory/src/player/processor/chart/component/labelAppear.ts b/packages/vstory/src/player/processor/chart/component/labelAppear.ts
@@ -1,9 +1,9 @@
-import type { IChartAppearAction } from '../../interface/appear-action';
+import type { IChartVisibilityAction } from '../../interface/appear-action';
 import type { IGraphic, IGroup } from '@visactor/vrender-core';
 
 export const runLabelAppear = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   switch (animation.effect) {
@@ -24,7 +24,7 @@ export const runLabelAppear = (
 
 const labelGrow = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   const { duration, easing } = animation;
@@ -44,7 +44,7 @@ const labelGrow = (
 
 const labelFade = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   const { duration, easing } = animation;
@@ -63,7 +63,7 @@ const labelFade = (
 
 const labelFollowGraphic = (
   instance: IGroup,
-  animation: IChartAppearAction['payload']['animation'],
+  animation: IChartVisibilityAction['payload']['animation'],
   option: { disappear: boolean }
 ) => {
   const { duration, easing } = animation;