Merge pull request #1 from VisActor/feat/scene4-scene5

feat(scene4-scen5): add scatter chart to scene4 & add scene5
VisActor · May 30, 2024 · ffd31e7 · ffd31e7
2 parents 3bbe7f6 + af391fc
commit ffd31e7
Show file tree

Hide file tree

Showing 12 changed files with 1,635 additions and 13 deletions.
diff --git a/packages/vstory/demo/index.html b/packages/vstory/demo/index.html
@@ -8,8 +8,7 @@
   </head>
 
   <body>
-    <!-- 视频 1920*1080, 等比例缩小 0.75 -->
-    <div id="root" style="width: 1440px; height: 810px"></div>
+    <div id="root"></div>
   </body>
   <script type="module" src="/src/App.tsx"></script>
 </html>
diff --git a/packages/vstory/demo/src/assets/scene5/atom.png b/packages/vstory/demo/src/assets/scene5/atom.png
diff --git a/packages/vstory/demo/src/assets/scene5/bg-decoration.png b/packages/vstory/demo/src/assets/scene5/bg-decoration.png
diff --git a/packages/vstory/demo/src/assets/scene5/chart.png b/packages/vstory/demo/src/assets/scene5/chart.png
diff --git a/packages/vstory/demo/src/assets/scene5/text-en.png b/packages/vstory/demo/src/assets/scene5/text-en.png
diff --git a/packages/vstory/demo/src/assets/scene5/text-zh.png b/packages/vstory/demo/src/assets/scene5/text-zh.png
diff --git a/packages/vstory/demo/src/assets/scene5/title-image.png b/packages/vstory/demo/src/assets/scene5/title-image.png
diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
@@ -5,6 +5,7 @@ import { scene1, scene1Characters } from './scene1';
 import { scene2, scene2Characters } from './scene2';
 import { scene3, scene3Characters } from './scene3';
 import { scene4, scene4Characters } from './scene4';
+import { scene5, scene5Characters } from './scene5';
 
 export const VChartSiteDemo = () => {
   const id = 'storyBar';
@@ -13,24 +14,26 @@ export const VChartSiteDemo = () => {
     // 准备一个图表
     const tempSpec: IStorySpec = {
       characters: [
-        ...scene1Characters, //
-        ...scene2Characters,
-        ...scene3Characters,
-        ...scene4Characters
+        // ...scene1Characters, //
+        // ...scene2Characters,
+        // ...scene3Characters,
+        // ...scene4Characters,
+        ...scene5Characters
       ],
       acts: [
         {
           id: 'default-chapter',
           scenes: [
             // scene1, //
             // scene2,
-            scene3,
-            scene4
+            // scene3,
+            // scene4,
+            scene5
           ]
         }
       ]
     };
-    console.log(111, tempSpec);
+    console.log('dsl', tempSpec);
     const story = new Story(tempSpec, { dom: id });
     window.story = story;
     story.play();
@@ -67,6 +70,6 @@ export const VChartSiteDemo = () => {
     //   story.getPlayer().tickTo(300 * i++);
     // }, 300);
   }, []);
-
-  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
+  /** 视频 1920*1080, 等比例缩小 0.75 */
+  return <div style={{ width: '1440px', height: '810px' }} id={id}></div>;
 };
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
@@ -1189,7 +1189,7 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           action: 'disappear',
-          startTime: 3500,
+          startTime: 6500,
           duration: 700,
           payload: {
             animation: {

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
@@ -9,6 +9,9 @@ import RectTexture from '../../assets/scene4/matrix.png';
 import DecorationImage from '../../assets/scene4/decoration.png';
 import BgDecorationImage from '../../assets/scene4/bg-decoration.png';
 
+const getCurve = (x: number) => {
+  return 0.0694 * x * x - 9.3056 * x + 321.1111; // 回归方程
+};
 export const scene4Characters: ICharacterSpec[] = [
   {
     type: 'ImageComponent',
@@ -116,6 +119,93 @@ export const scene4Characters: ICharacterSpec[] = [
       }
     }
   },
+  {
+    type: 'ScatterChart',
+    id: 'scatter',
+    zIndex: 1,
+    position: {
+      left: 200,
+      top: 320,
+      width: 500,
+      height: 120
+    },
+    options: {
+      panel: {
+        fill: '#ffffff',
+        stroke: 'black',
+        lineWidth: 1
+      },
+      data: [
+        {
+          id: 'data',
+          values: [
+            { x: 104, y: 10, type: 'A' },
+            { x: 98, y: 10, type: 'A' },
+            { x: 93, y: 10, type: 'A' },
+            { x: 90, y: 10, type: 'A' },
+            { x: 76, y: 10, type: 'A' },
+            { x: 70, y: 10, type: 'A' },
+            { x: 63, y: 10, type: 'A' }
+          ]
+        }
+      ],
+      seriesSpec: [
+        {
+          matchInfo: { specIndex: 'all' },
+          spec: {
+            background: 'white',
+            xField: 'x',
+            yField: 'y',
+            seriesField: 'type',
+            point: {
+              style: {
+                size: 8,
+                fill: `#E05F38`
+              }
+            },
+            axes: [
+              {
+                orient: 'bottom',
+                bandPadding: 0
+              }
+            ],
+            animationUpdate: {
+              easing: 'cubicInOut',
+              duration: 1000
+            }
+          }
+        }
+      ],
+      componentSpec: [
+        {
+          specKey: 'axes',
+          matchInfo: { orient: 'bottom', bandPadding: 0, paddingInner: 0, paddingOuter: 0 },
+          spec: {
+            bandPadding: 0,
+            paddingInner: 0,
+            paddingOuter: 0,
+            min: 0,
+            max: 110,
+            type: 'linear',
+            tick: { visible: false },
+            label: { visible: false },
+            grid: { visible: false },
+            domainLine: { visible: true, style: { stroke: 'black', lineWidth: 4 } }
+          }
+        },
+        {
+          specKey: 'axes',
+          matchInfo: { orient: 'left' },
+          spec: {
+            visible: false,
+            min: 0,
+            max: 100
+          }
+        }
+      ],
+      attribute: {}
+    }
+  },
   {
     type: 'LineComponent',
     id: 'scene4-text-zh-line',
@@ -219,6 +309,22 @@ export const scene4Characters: ICharacterSpec[] = [
       }
     }
   },
+  {
+    type: 'ImageComponent',
+    id: 'scene4-bg-decoration',
+    zIndex: 1,
+    position: {
+      left: 180,
+      top: 680,
+      width: 1200,
+      height: 140
+    },
+    options: {
+      graphic: {
+        image: BgDecorationImage
+      }
+    }
+  },
   {
     type: 'ImageComponent',
     id: 'scene4-bg-decoration',
@@ -374,6 +480,33 @@ export const scene4: ISceneSpec = {
               easing: 'easeInOutQuad'
             }
           }
+        },
+        {
+          // TODO: startOffset
+          startTime: 2500,
+          duration: 700,
+          action: 'disappear',
+          payload: {
+            graphic: {
+              width: 500,
+              height: 120
+            },
+            animation: {
+              duration: 700
+            }
+          }
+        },
+        {
+          // TODO: startOffset
+          startTime: 5000,
+          duration: 500,
+          action: 'appear',
+          payload: {
+            animation: {
+              duration: 500,
+              effect: 'fade'
+            }
+          }
         }
       ]
     },
@@ -546,6 +679,107 @@ export const scene4: ISceneSpec = {
           }
         }
       ]
+    },
+    {
+      characterId: 'scatter',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 2500,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              easing: 'cubicOut',
+              fade: {
+                opacity: 1,
+                isBaseOpacity: true,
+                easing: 'linear'
+              }
+            }
+          }
+        },
+        {
+          action: 'update',
+          startTime: 3500,
+          duration: 1000,
+          payload: {
+            id: 'data',
+            data: [
+              { x: 104, y: 10, type: 'A' },
+              { x: 98, y: 10, type: 'A' },
+              { x: 93, y: 10, type: 'A' },
+              { x: 90, y: 10, type: 'A' },
+              { x: 76, y: 10, type: 'A' },
+              { x: 70, y: 10, type: 'A' },
+              { x: 63, y: 10, type: 'A' }
+            ].map(v => {
+              return {
+                sourceValue: v,
+                targetValue: {
+                  ...v,
+                  y: getCurve(v.x)
+                }
+              };
+            })
+          }
+        },
+        {
+          action: 'disappear',
+          startTime: 5000,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
     }
   ]
 };
+
+scene4.actions.forEach(({ characterActions }) => {
+  characterActions.push({
+    action: 'disappear',
+    startTime: 6000,
+    duration: 500,
+    payload: {
+      animation: {
+        duration: 500,
+        effect: 'fade'
+      }
+    }
+  });
+});
+
+scene4.actions.push({
+  characterId: 'scene3-background',
+  characterActions: [
+    {
+      action: 'style',
+      startTime: 6000,
+      duration: 500,
+      payload: {
+        graphic: {
+          scaleY: 0
+        },
+        animation: {
+          duration: 500
+        }
+      }
+    },
+    {
+      action: 'disappear',
+      startTime: 6000,
+      duration: 500,
+      payload: {
+        animation: {
+          duration: 500,
+          effect: 'fade'
+        }
+      }
+    }
+  ]
+});