feat: add scene delay

VisActor · Jun 17, 2024 · 7413c9c · 7413c9c
1 parent 1426da8
commit 7413c9c
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 122 deletions.
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx
@@ -844,6 +844,8 @@ const chartSpecList = [
             valueField: 'value',
             outerRadius: 1,
             innerRadius: 0,
+            gap: 1,
+            sunburst: { style: { stroke: false, lineWidth: 0 } },
             label: {
               visible: false
             }

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx
@@ -213,14 +213,14 @@ export const scene10Characters: ICharacterSpec[] = [
 
 export const scene10: ISceneSpec = {
   id: 'scene10',
-  delay: -1000, // FIXME:
+  delay: -1000,
   actions: [
     {
       characterId: 'scene10-background',
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx
@@ -1,6 +1,5 @@
 import type { ICharacterSpec } from '../../../../src/story/character';
 import type { ISceneSpec } from '../../../../src/story/interface';
-import scene11Person from '../../assets/scene11/person.png';
 import scene11BgDecoration from '../../assets/scene11/bg-decoration.png';
 import scene11TextEn from '../../assets/scene11/text-en.png';
 import scene11TextZh from '../../assets/scene11/text-zh.png';
@@ -308,13 +307,14 @@ export const scene11Characters: ICharacterSpec[] = [
 
 export const scene11: ISceneSpec = {
   id: 'scene11',
+  delay: -1000,
   actions: [
     {
       characterId: 'scene11-background',
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {
@@ -331,7 +331,7 @@ export const scene11: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {
@@ -348,7 +348,7 @@ export const scene11: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {
@@ -367,7 +367,7 @@ export const scene11: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {
@@ -386,7 +386,7 @@ export const scene11: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 500,
+          startTime: 1,
           duration: 500,
           payload: {
             animation: {
@@ -424,7 +424,7 @@ export const scene11: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 1500,
+          startTime: 2000,
           duration: 1000,
           payload: {
             animation: {
@@ -438,7 +438,7 @@ export const scene11: ISceneSpec = {
         },
         {
           action: 'disappear',
-          startTime: 3500,
+          startTime: 4500,
           duration: 1000,
           payload: {
             animation: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx
@@ -505,6 +505,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [
 
 export const scene12_2: ISceneSpec = {
   id: 'scene12_2',
+  delay: -1000,
   actions: [
     {
       characterId: 'scene12_2-title',

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx
@@ -544,6 +544,7 @@ export const scene12Characters: ICharacterSpec[] = [
 
 export const scene12: ISceneSpec = {
   id: 'scene12',
+  delay: -1500,
   actions: [
     {
       characterId: 'scene12-background',

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
@@ -1336,51 +1336,54 @@ export const scene5: ISceneSpec = {
       ]
     },
     {
-      characterId: 'scene5-en-text',
+      characterId: 'scene5-chart',
       characterActions: [
         {
-          startTime: 300,
+          startTime: 2000,
           duration: 700,
           action: 'appear',
           payload: {
             animation: {
               easing: easeInOutQuad,
               duration: 700,
-              move: {
-                from: 'bottom'
+              effect: 'fade',
+              fade: {
+                isBaseOpacity: true
               }
             }
           }
-        }
-      ]
-    },
-    {
-      characterId: 'scene5-chart',
-      characterActions: [
+        },
         {
-          startTime: 2000,
+          startTime: 4000,
           duration: 700,
-          action: 'appear',
+          action: 'disappear',
           payload: {
             animation: {
               easing: easeInOutQuad,
               duration: 700,
+              effect: 'fade',
               fade: {
+                opacity: 0,
                 isBaseOpacity: true
               }
             }
           }
-        },
+        }
+      ]
+    },
+    {
+      characterId: 'scene5-en-text',
+      characterActions: [
         {
-          startTime: 4000,
+          startTime: 300,
           duration: 700,
-          action: 'disappear',
+          action: 'appear',
           payload: {
             animation: {
               easing: easeInOutQuad,
               duration: 700,
-              fade: {
-                isBaseOpacity: true
+              move: {
+                from: 'bottom'
               }
             }
           }
@@ -1391,50 +1394,54 @@ export const scene5: ISceneSpec = {
 };
 
 // disappear
-scene5.actions.forEach(({ characterId, characterActions }) => {
-  const duration = 700;
+scene5.actions
+  .filter(({ characterId }) => characterId !== 'scene5-chart')
+  .forEach(({ characterId, characterActions }) => {
+    const duration = 700;
 
-  if (characterId !== 'scene5-background-decoration') {
-    const scaleX = 4;
-    const scaleY = 4;
-    const transformPointFunc = getTransformPointFunc(-450, -180, scaleX, scaleY);
+    if (characterId !== 'scene5-background-decoration') {
+      const scaleX = 4;
+      const scaleY = 4;
+      const transformPointFunc = getTransformPointFunc(-450, -180, scaleX, scaleY);
 
-    const character = scene5Characters.find(c => c.id === characterId);
-    if (character) {
-      const { left, top, width, height } = character.position;
-      const { x, y } = transformPointFunc(left, top);
-      const newWidth = width * scaleX;
-      const newHeight = height * scaleY;
-      characterActions.push({
-        startTime: 5400,
-        duration,
-        action: 'style',
-        payload: {
-          graphic: {
-            width: newWidth,
-            height: newHeight,
-            x,
-            y
-          },
-          animation: {
-            easing: 'easeInOutQuad',
-            duration
+      const character = scene5Characters.find(c => c.id === characterId);
+      if (character) {
+        // @ts-ignore
+        const { left, top, width, height } = character.position;
+        const { x, y } = transformPointFunc(left, top);
+        const newWidth = width * scaleX;
+        const newHeight = height * scaleY;
+        characterActions.push({
+          startTime: 5400,
+          duration,
+          action: 'style',
+          payload: {
+            graphic: {
+              width: newWidth,
+              height: newHeight,
+              x,
+              y
+            },
+            animation: {
+              easing: easeInOutQuad,
+              duration
+            }
           }
-        }
-      });
-    }
-  }
-
-  characterActions.push({
-    startTime: 5400,
-    duration,
-    action: 'disappear',
-    payload: {
-      animation: {
-        easing: 'easeInOutQuad',
-        duration,
-        effect: 'fade'
+        });
       }
     }
+    characterActions.push({
+      startTime: 5400,
+      duration,
+      action: 'disappear',
+      payload: {
+        animation: {
+          easing: easeInOutQuad,
+          duration,
+          fade: {
+            opacity: 0
+          }
+        }
+      }
+    });
   });
-});