diff --git a/packages/vstory/demo/src/assets/scene7/bg-decoration.png b/packages/vstory/demo/src/assets/scene7/bg-decoration.png
new file mode 100644
index 00000000..471e33bc
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/bg-decoration.png differ
diff --git a/packages/vstory/demo/src/assets/scene7/chart.png b/packages/vstory/demo/src/assets/scene7/chart.png
new file mode 100644
index 00000000..b98d7525
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/chart.png differ
diff --git a/packages/vstory/demo/src/assets/scene7/pie.png b/packages/vstory/demo/src/assets/scene7/pie.png
new file mode 100644
index 00000000..8297ba10
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/pie.png differ
diff --git a/packages/vstory/demo/src/assets/scene7/text-en.png b/packages/vstory/demo/src/assets/scene7/text-en.png
new file mode 100644
index 00000000..c9dcd981
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/text-en.png differ
diff --git a/packages/vstory/demo/src/assets/scene7/text-zh.png b/packages/vstory/demo/src/assets/scene7/text-zh.png
new file mode 100644
index 00000000..ac93b29d
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/text-zh.png differ
diff --git a/packages/vstory/demo/src/assets/scene7/title.png b/packages/vstory/demo/src/assets/scene7/title.png
new file mode 100644
index 00000000..b7c48bf0
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene7/title.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/bg-decoration.png b/packages/vstory/demo/src/assets/scene8/bg-decoration.png
new file mode 100644
index 00000000..75952fa7
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/bg-decoration.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/chart.png b/packages/vstory/demo/src/assets/scene8/chart.png
new file mode 100644
index 00000000..ee288f40
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/chart.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/image1.png b/packages/vstory/demo/src/assets/scene8/image1.png
new file mode 100644
index 00000000..13162ea6
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/image1.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/image2.png b/packages/vstory/demo/src/assets/scene8/image2.png
new file mode 100644
index 00000000..1635b933
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/image2.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/text.png b/packages/vstory/demo/src/assets/scene8/text.png
new file mode 100644
index 00000000..d30a2fb5
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/text.png differ
diff --git a/packages/vstory/demo/src/assets/scene8/title.png b/packages/vstory/demo/src/assets/scene8/title.png
new file mode 100644
index 00000000..e5292510
Binary files /dev/null and b/packages/vstory/demo/src/assets/scene8/title.png differ
diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
index bf062b78..5d14995b 100644
--- a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
@@ -6,6 +6,8 @@ import { scene2, scene2Characters } from './scene2';
 import { scene3, scene3Characters } from './scene3';
 import { scene4, scene4Characters } from './scene4';
 import { scene5, scene5Characters } from './scene5';
+import { scene7, scene7Characters } from './scene7';
+import { scene8, scene8Characters } from './scene8';
 
 export const VChartSiteDemo = () => {
   const id = 'storyBar';
@@ -16,9 +18,11 @@ export const VChartSiteDemo = () => {
       characters: [
         // ...scene1Characters, //
         // ...scene2Characters,
-        // ...scene3Characters,
+        // ...scene3Characters
         // ...scene4Characters,
-        ...scene5Characters
+        // ...scene5Characters,
+        ...scene7Characters,
+        ...scene8Characters
       ],
       acts: [
         {
@@ -26,9 +30,11 @@ export const VChartSiteDemo = () => {
           scenes: [
             // scene1, //
             // scene2,
-            // scene3,
+            // scene3
             // scene4,
-            scene5
+            // scene5,
+            scene7,
+            scene8
           ]
         }
       ]
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
index 0b78a2bb..06668e96 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx
@@ -10,6 +10,8 @@ import Scene3ChartImage2 from '../../assets/scene3/chart-2.png';
 import Scene3ChartImage3 from '../../assets/scene3/chart-3.png';
 import Scene3ChartImage4 from '../../assets/scene3/chart-4.png';
 import Scene3ChartImage5 from '../../assets/scene3/chart-5.png';
+
+import { easeInOutQuad } from './util';
 // @ts-ignore
 export const scene3Characters: ICharacterSpec[] = [
   {
@@ -439,7 +441,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'right'
               }
@@ -458,7 +460,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'right'
               }
@@ -477,7 +479,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'right'
               }
@@ -491,14 +493,15 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           startTime: 1,
-          duration: 700,
+          duration: 3000,
           action: 'appear',
           payload: {
             animation: {
-              duration: 700,
-              easing: 'easeInOutQuad',
+              duration: 3000,
+              easing: easeInOutQuad,
               move: {
-                from: 'right'
+                from: 'right',
+                isVariableSpeed: false
               }
             }
           }
@@ -510,14 +513,15 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           startTime: 1,
-          duration: 700,
+          duration: 3000,
           action: 'appear',
           payload: {
             animation: {
-              duration: 700,
-              easing: 'easeInOutQuad',
+              duration: 3000,
+              easing: easeInOutQuad,
               move: {
-                from: 'right'
+                from: 'right',
+                isVariableSpeed: false
               }
             }
           }
@@ -529,14 +533,15 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           startTime: 1,
-          duration: 700,
+          duration: 3000,
           action: 'appear',
           payload: {
             animation: {
-              duration: 700,
-              easing: 'easeInOutQuad',
+              duration: 3000,
+              easing: easeInOutQuad,
               move: {
-                from: 'right'
+                from: 'right',
+                isVariableSpeed: false
               }
             }
           }
@@ -548,14 +553,15 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           startTime: 1,
-          duration: 700,
+          duration: 3000,
           action: 'appear',
           payload: {
             animation: {
-              duration: 700,
-              easing: 'easeInOutQuad',
+              duration: 3000,
+              easing: easeInOutQuad,
               move: {
-                from: 'right'
+                from: 'right',
+                isVariableSpeed: false
               }
             }
           }
@@ -567,14 +573,15 @@ export const scene3: ISceneSpec = {
       characterActions: [
         {
           startTime: 1,
-          duration: 700,
+          duration: 3000,
           action: 'appear',
           payload: {
             animation: {
-              duration: 700,
-              easing: 'easeInOutQuad',
+              duration: 3000,
+              easing: easeInOutQuad,
               move: {
-                from: 'right'
+                from: 'right',
+                isVariableSpeed: false
               }
             }
           }
@@ -591,7 +598,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -610,7 +617,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -627,7 +634,7 @@ export const scene3: ISceneSpec = {
             },
             animation: {
               duration: 1000,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -643,7 +650,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -661,7 +668,7 @@ export const scene3: ISceneSpec = {
             },
             animation: {
               duration: 1000,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -677,7 +684,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -694,7 +701,7 @@ export const scene3: ISceneSpec = {
             },
             animation: {
               duration: 1000,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -710,7 +717,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -728,7 +735,7 @@ export const scene3: ISceneSpec = {
             },
             animation: {
               duration: 1000,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -744,7 +751,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -762,7 +769,7 @@ export const scene3: ISceneSpec = {
             },
             animation: {
               duration: 1000,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         },
@@ -789,7 +796,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 500,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -1230,7 +1237,7 @@ export const scene3: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
index 986972e1..52f467ac 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx
@@ -8,6 +8,7 @@ import TextZhImage from '../../assets/scene4/text-zh.png';
 import RectTexture from '../../assets/scene4/matrix.png';
 import DecorationImage from '../../assets/scene4/decoration.png';
 import BgDecorationImage from '../../assets/scene4/bg-decoration.png';
+import { easeInOutQuad } from './util';
 
 const getCurve = (x: number) => {
   return 0.0694 * x * x - 9.3056 * x + 321.1111; // 回归方程
@@ -356,7 +357,7 @@ export const scene4: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
 
               duration: 700,
               move: {
@@ -377,7 +378,7 @@ export const scene4: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
 
               duration: 700,
               move: {
@@ -399,7 +400,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'top'
               }
@@ -419,7 +420,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
 
               move: {
                 from: 'top'
@@ -440,7 +441,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'top'
               }
@@ -460,7 +461,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               effect: 'fade'
             }
           }
@@ -477,7 +478,7 @@ export const scene4: ISceneSpec = {
             },
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         },
@@ -521,7 +522,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -540,7 +541,7 @@ export const scene4: ISceneSpec = {
             },
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -557,7 +558,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -576,7 +577,7 @@ export const scene4: ISceneSpec = {
             },
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad'
+              easing: easeInOutQuad
             }
           }
         }
@@ -593,7 +594,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -613,7 +614,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'top'
               }
@@ -633,7 +634,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'bottom'
               }
@@ -653,7 +654,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               move: {
                 from: 'right'
               }
@@ -673,7 +674,7 @@ export const scene4: ISceneSpec = {
           payload: {
             animation: {
               duration: 700,
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               effect: 'fade'
             }
           }
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
index 93c2afa0..26c95cac 100644
--- a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
+++ b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx
@@ -6,6 +6,7 @@ import scene5Atom from '../../assets/scene5/atom.png';
 import scene5ChartImage from '../../assets/scene5/chart.png';
 import scene5EnText from '../../assets/scene5/text-en.png';
 import scene5ZhText from '../../assets/scene5/text-zh.png';
+import { easeInOutQuad } from './util';
 
 const chartSpec = {
   type: 'sequence',
@@ -1201,7 +1202,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'top'
@@ -1221,7 +1222,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'top'
@@ -1241,7 +1242,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'bottom'
@@ -1261,7 +1262,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'top'
@@ -1281,7 +1282,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'top'
@@ -1301,7 +1302,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'top'
@@ -1321,7 +1322,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               effect: 'fade'
             }
@@ -1334,7 +1335,7 @@ export const scene5: ISceneSpec = {
           action: 'disappear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               effect: 'fade'
             }
@@ -1352,7 +1353,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'bottom'
@@ -1372,7 +1373,7 @@ export const scene5: ISceneSpec = {
           action: 'appear',
           payload: {
             animation: {
-              easing: 'easeInOutQuad',
+              easing: easeInOutQuad,
               duration: 700,
               move: {
                 from: 'bottom'
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene7.tsx b/packages/vstory/demo/src/demos/VChartSite/scene7.tsx
new file mode 100644
index 00000000..9d3dee54
--- /dev/null
+++ b/packages/vstory/demo/src/demos/VChartSite/scene7.tsx
@@ -0,0 +1,410 @@
+import type { ICharacterSpec } from '../../../../src/story/character';
+import type { ISceneSpec } from '../../../../src/story/interface';
+import scene7TextZh from '../../assets/scene7/text-zh.png';
+import scene7TextEn from '../../assets/scene7/text-en.png';
+import scene7Chart from '../../assets/scene7/chart.png';
+import scene7Title from '../../assets/scene7/title.png';
+import scene7Pie from '../../assets/scene7/pie.png';
+import { easeInOutQuad } from './util';
+
+const chartSpec = {
+  type: 'pie',
+  dataIndex: 0,
+  outerRadius: 0.75,
+  innerRadius: 0,
+  valueField: 'value',
+  categoryField: 'type',
+  color: ['#56826C', '#BF6970', '#CDA871', '#B4948F', '#a05d56', '#CC6691', '#EBA4C2'],
+  background: 'transparent',
+  data: {
+    values: [
+      { type: '0~9', value: '39.12' },
+      { type: '10~19', value: '43.01' },
+      { type: '20~29', value: '43.91' },
+      { type: '30~39', value: '45.4' },
+      { type: '40~49', value: '40.89' },
+      { type: '50~59', value: '42.48' },
+      { type: '60~69', value: '39.63' },
+      { type: '70~79', value: '25.17' },
+      { type: '80 and over', value: '12.29' }
+    ]
+  },
+  label: {
+    visible: true
+  },
+  pie: {
+    style: {
+      stroke: 'rgb(238,231,217)',
+      lineWidth: 1
+    }
+  }
+};
+// FIXME: 1801 的上中下两块背景都需要从上一页继承下来
+export const scene7Characters: ICharacterSpec[] = [
+  {
+    type: 'RectComponent',
+    id: `scene7-background-top`,
+    zIndex: 0,
+    position: {
+      top: 0,
+      left: 0,
+      width: 1440,
+      height: 66
+    },
+    options: {
+      graphic: {
+        stroke: false,
+        scaleX: 0.8,
+        fill: 'rgb(195,195,195)'
+      }
+    }
+  },
+  {
+    type: 'RectComponent',
+    id: `scene7-background-middle`,
+    zIndex: 0,
+    position: {
+      top: 66,
+      left: 0,
+      width: 1440,
+      height: 596
+    },
+    options: {
+      graphic: {
+        stroke: false,
+        fill: 'rgb(221,221,221)'
+      }
+    }
+  },
+  {
+    type: 'RectComponent',
+    id: `scene7-background-bottom`,
+    zIndex: 0,
+    position: {
+      top: 662,
+      left: 0,
+      width: 1440,
+      height: 148
+    },
+    options: {
+      graphic: {
+        stroke: false,
+        scaleX: 0.8,
+        fill: 'rgb(30,34,33)'
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene7-zh-text`,
+    zIndex: 0,
+    position: {
+      top: 416,
+      left: 167,
+      width: 248,
+      height: 142
+    },
+    options: {
+      graphic: {
+        image: scene7TextZh
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene7-title`,
+    zIndex: 0,
+    position: {
+      top: 75,
+      left: 150,
+      width: 675,
+      height: 390
+    },
+    options: {
+      graphic: {
+        image: scene7Title
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene7-chart-image`,
+    zIndex: 0,
+    position: {
+      top: 180,
+      left: 534,
+      width: 548,
+      height: 336
+    },
+    options: {
+      graphic: {
+        image: scene7Chart
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene7-en-text`,
+    zIndex: 0,
+    position: {
+      top: 178,
+      left: 1105,
+      width: 276,
+      height: 158
+    },
+    options: {
+      graphic: {
+        image: scene7TextEn
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene7-pie-image`,
+    zIndex: 0,
+    position: {
+      top: 484,
+      left: 1136,
+      width: 248,
+      height: 248
+    },
+    options: {
+      graphic: {
+        image: scene7Pie
+      }
+    }
+  },
+  {
+    type: 'PieChart',
+    id: `scene7-chart`,
+    zIndex: 0,
+    position: {
+      top: 208,
+      left: 534,
+      width: 548,
+      height: 278
+    },
+    options: {
+      spec: chartSpec,
+      panel: {
+        fill: 'rgb(238,231,217)',
+        stroke: 'black',
+        lineWidth: 1
+      }
+    }
+  }
+];
+export const scene7: ISceneSpec = {
+  id: 'scene7',
+  actions: [
+    {
+      characterId: 'scene7-background-top',
+      characterActions: [
+        // 应该是一个 scaleX 更新的动画
+        {
+          action: 'style',
+          startTime: 1,
+          duration: 500,
+          payload: {
+            graphic: { scaleX: 1 },
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-background-middle',
+      characterActions: [
+        // 应该是一个 scaleX 更新的动画
+        {
+          action: 'style',
+          startTime: 1,
+          duration: 500,
+          payload: {
+            graphic: { scaleX: 1 },
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-background-bottom',
+      characterActions: [
+        // 应该是一个 scaleX 更新的动画
+        {
+          action: 'style',
+          startTime: 1,
+          duration: 500,
+          payload: {
+            graphic: { scaleX: 1 }, // TODO: 这里应该有一个从上一页继承过来的 bg Image
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-zh-text',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad,
+              move: {
+                from: 'left'
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-title',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 100,
+          payload: {
+            animation: {
+              duration: 100,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    },
+
+    {
+      characterId: 'scene7-en-text',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 300,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad,
+              move: {
+                from: 'top'
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-pie-image',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 1000,
+          payload: {
+            animation: {
+              duration: 1000,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene7-chart-image',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 500,
+          payload: {
+            animation: {
+              duration: 500,
+              easing: easeInOutQuad,
+              move: {
+                from: 'top'
+              }
+            }
+          }
+        }
+      ]
+    },
+    // FIXME: 1. label is not shown; 2. growAngle effect is not correct
+    {
+      characterId: 'scene7-chart',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1500,
+          duration: 1000,
+          payload: {
+            animation: {
+              duration: 1000
+            }
+          }
+        },
+        {
+          action: 'disappear',
+          startTime: 3500,
+          duration: 1000,
+          payload: {
+            animation: {
+              duration: 1000,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+scene7.actions.forEach(({ characterId, characterActions }) => {
+  if (characterId === 'scene7-background-bottom') {
+    characterActions.push({
+      action: 'disappear',
+      startTime: 5500,
+      duration: 500,
+      payload: {
+        animation: {
+          duration: 500,
+          easing: easeInOutQuad,
+          effect: 'fade'
+        }
+      }
+    });
+  } else {
+    characterActions.push({
+      action: 'disappear',
+      startTime: 5500,
+      duration: 500,
+      payload: {
+        animation: {
+          duration: 500,
+          easing: easeInOutQuad,
+          move: {
+            to: 'top'
+          },
+          fade: {
+            opacity: 0
+          }
+        }
+      }
+    });
+  }
+});
diff --git a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
new file mode 100644
index 00000000..b1447dd9
--- /dev/null
+++ b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx
@@ -0,0 +1,447 @@
+import type { ICharacterSpec } from '../../../../src/story/character';
+import type { ISceneSpec } from '../../../../src/story/interface';
+import scene8Text from '../../assets/scene8/text.png';
+import scene8Chart from '../../assets/scene8/chart.png';
+import scene8Title from '../../assets/scene8/title.png';
+import scene8BgDecoration from '../../assets/scene8/bg-decoration.png';
+import scene8Image1 from '../../assets/scene8/image1.png';
+import scene8Image2 from '../../assets/scene8/image2.png';
+import { easeInOutElastic, easeInOutQuad } from './util';
+
+const chartSpec = {
+  type: 'scatter',
+  padding: { left: 6, right: 30 },
+  xField: 'year',
+  yField: 'value',
+  tooltip: {
+    dimension: {
+      visible: false
+    },
+    mark: {
+      visible: false
+    }
+  },
+  crosshair: {
+    yField: {
+      visible: false
+    },
+    xField: {
+      visible: false
+    }
+  },
+  point: {
+    style: {
+      fill: 'black',
+      size: 4,
+      outerBorder: (data: any) => {
+        if (data.border) {
+          return {
+            distance: 2,
+            lineWidth: 1,
+            stroke: 'black',
+            strokeOpacity: 0.4
+          };
+        }
+      }
+    }
+  },
+  axes: [
+    {
+      title: {
+        visible: true,
+        text: 'Poisition Angle(deg.)',
+        style: { fill: 'black', fontSize: 8 }
+      },
+      orient: 'left',
+      min: 80,
+      max: 170,
+      niceType: 'accurateFirst',
+      tick: { visible: true, forceTickCount: 10, style: { stroke: 'black' } },
+      subTick: { visible: true, tickCount: 5, style: { stroke: 'black' } },
+      domainLine: { visible: true, style: { stroke: 'black' } },
+      label: { visible: true, style: { fill: 'black', fontSize: 8 } },
+      grid: { visible: false },
+      type: 'linear'
+    },
+    {
+      title: {
+        visible: true,
+        text: 'Year',
+        style: { fill: 'black', fontSize: 8 }
+      },
+      orient: 'bottom',
+      label: { visible: true, style: { fill: 'black', fontSize: 8 } },
+      domainLine: { visible: true, style: { stroke: 'black' } },
+      tick: { visible: true, forceTickCount: 14, style: { stroke: 'black' } },
+      subTick: { visible: true, tickCount: 1, style: { stroke: 'black' } },
+      grid: { visible: false },
+      type: 'linear',
+      min: 1710,
+      max: 1840,
+      step: 10
+    },
+    {
+      orient: 'top',
+      label: { visible: false, style: { fill: 'black' } },
+      domainLine: { visible: true, style: { stroke: 'black' } },
+      tick: { visible: false, forceTickCount: 14, style: { stroke: 'black' } },
+      subTick: { visible: false, tickCount: 1, style: { stroke: 'black' } },
+      grid: { visible: false },
+      type: 'linear',
+      min: 1710,
+      max: 1840,
+      step: 10
+    },
+    {
+      orient: 'right',
+      label: { visible: false, style: { fill: 'black' } },
+      domainLine: { visible: true, style: { stroke: 'black' } },
+      tick: { visible: false, forceTickCount: 14, style: { stroke: 'black' } },
+      subTick: { visible: false, tickCount: 1, style: { stroke: 'black' } },
+      grid: { visible: false },
+      type: 'linear',
+      min: 80,
+      max: 170
+    }
+  ],
+  data: [
+    {
+      id: 'data',
+      values: [
+        { year: 1718, value: 139 },
+        { year: 1720, value: 162, border: true },
+        { year: 1756, value: 146, border: true },
+        { year: 1782, value: 132, border: true },
+        { year: 1803, value: 120, border: true },
+        { year: 1820, value: 105, border: true },
+        { year: 1822, value: 102, border: true },
+        { year: 1822.5, value: 101, border: true },
+        { year: 1825, value: 97, border: true },
+        { year: 1825.5, value: 96, border: true },
+        { year: 1830, value: 82, border: true }
+      ]
+    }
+  ]
+};
+
+export const scene8Characters: ICharacterSpec[] = [
+  {
+    type: 'RectComponent',
+    id: `scene8-background`,
+    zIndex: 0,
+    position: {
+      top: 0,
+      left: 0,
+      width: 1440,
+      height: 810
+    },
+    options: {
+      graphic: {
+        stroke: false,
+        fill: 'rgb(34,34,34)'
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-bg-decoration`,
+    zIndex: 0,
+    position: {
+      top: 80,
+      left: 0,
+      width: 1440,
+      height: 810
+    },
+    options: {
+      graphic: {
+        image: scene8BgDecoration
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-title`,
+    zIndex: 0,
+    position: {
+      top: 156,
+      left: 126,
+      width: 426,
+      height: 144
+    },
+    options: {
+      graphic: {
+        image: scene8Title
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-text`,
+    zIndex: 0,
+    position: {
+      top: 472,
+      left: 128,
+      width: 336,
+      height: 248
+    },
+    options: {
+      graphic: {
+        image: scene8Text
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-chart-image`,
+    zIndex: 0,
+    position: {
+      top: 190,
+      left: 882,
+      width: 373,
+      height: 337
+    },
+    options: {
+      graphic: {
+        image: scene8Chart
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-image1`,
+    zIndex: 0,
+    position: {
+      top: 358,
+      left: 590,
+      width: 280,
+      height: 453
+    },
+    options: {
+      graphic: {
+        image: scene8Image1
+      }
+    }
+  },
+  {
+    type: 'ImageComponent',
+    id: `scene8-image2`,
+    zIndex: 0,
+    position: {
+      top: 514,
+      left: 1066,
+      width: 190,
+      height: 226
+    },
+    options: {
+      graphic: {
+        image: scene8Image2
+      }
+    }
+  },
+  {
+    type: 'ScatterChart',
+    id: `scene8-chart`,
+    zIndex: 0,
+    position: {
+      top: 210,
+      left: 890,
+      width: 360,
+      height: 290
+    },
+    options: {
+      spec: chartSpec,
+      panel: {
+        fill: 'white'
+      }
+    }
+  }
+];
+
+export const scene8: ISceneSpec = {
+  id: 'scene8',
+  actions: [
+    {
+      characterId: 'scene8-background',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 700,
+          payload: {
+            animation: {
+              duration: 700,
+              easing: easeInOutQuad,
+              move: {
+                from: 'bottom'
+              }
+            }
+          }
+        },
+        {
+          action: 'style',
+          startTime: 1,
+          duration: 700,
+          payload: {
+            graphic: {
+              fill: 'rgb(30,34,33)'
+            },
+            animation: {
+              duration: 700,
+              easing: easeInOutQuad
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-bg-decoration',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 800,
+          payload: {
+            animation: {
+              duration: 800,
+              easing: easeInOutQuad,
+              move: {
+                from: 'bottom'
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-title',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 800,
+          payload: {
+            animation: {
+              duration: 800,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-text',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 800,
+          payload: {
+            animation: {
+              duration: 800,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-image1',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 1500,
+          payload: {
+            animation: {
+              duration: 1500,
+              easing: easeInOutElastic,
+              move: {
+                from: 'bottom-left'
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-chart-image',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 200,
+          duration: 1500,
+          payload: {
+            animation: {
+              duration: 1500,
+              easing: easeInOutElastic,
+              move: { from: 'top-right' }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-image2',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 1,
+          duration: 1500,
+          payload: {
+            animation: {
+              duration: 1500,
+              easing: easeInOutElastic,
+              move: { from: 'bottom-right' }
+            }
+          }
+        }
+      ]
+    },
+    {
+      characterId: 'scene8-chart',
+      characterActions: [
+        {
+          action: 'appear',
+          startTime: 2500,
+          duration: 700,
+          payload: {
+            animation: {
+              duration: 700,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        },
+        {
+          action: 'disappear',
+          startTime: 5200,
+          duration: 700,
+          payload: {
+            animation: {
+              duration: 700,
+              easing: easeInOutQuad,
+              effect: 'fade'
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+scene8.actions.forEach(({ characterActions }) => {
+  characterActions.push({
+    action: 'disappear',
+    startTime: 7000,
+    duration: 500,
+    payload: {
+      animation: {
+        duration: 500,
+        easing: easeInOutQuad,
+        effect: 'fade'
+      }
+    }
+  });
+});
diff --git a/packages/vstory/demo/src/demos/VChartSite/util.ts b/packages/vstory/demo/src/demos/VChartSite/util.ts
new file mode 100644
index 00000000..e0417570
--- /dev/null
+++ b/packages/vstory/demo/src/demos/VChartSite/util.ts
@@ -0,0 +1,22 @@
+export function easeInOutQuad(t: number) {
+  if ((t /= 0.5) < 1) return 0.5 * Math.pow(t, 2);
+  return -0.5 * ((t -= 2) * t - 2);
+}
+
+export function easeOutElastic(x: number): number {
+  const c4 = (2 * Math.PI) / 3;
+
+  return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+}
+
+export function easeInOutElastic(x: number): number {
+  const c5 = (2 * Math.PI) / 4.5;
+
+  return x === 0
+    ? 0
+    : x === 1
+    ? 1
+    : x < 0.5
+    ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2
+    : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;
+}
diff --git a/packages/vstory/src/dsl/story-processor/graphic/effect/appear.ts b/packages/vstory/src/dsl/story-processor/graphic/effect/appear.ts
index e9190c17..033078b7 100644
--- a/packages/vstory/src/dsl/story-processor/graphic/effect/appear.ts
+++ b/packages/vstory/src/dsl/story-processor/graphic/effect/appear.ts
@@ -6,19 +6,19 @@ import { typewriter } from '../effect/typewriter';
 import { canDoGraphicAnimation } from '../util';
 
 export interface IMoveInParams extends IAnimationParams {
-  from?: 'left' | 'right' | 'top' | 'bottom';
+  from?: 'left' | 'right' | 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
   move?: {
     /**
      * @default left
      */
-    from?: 'left' | 'right' | 'top' | 'bottom';
+    from?: IMoveInParams['from'];
     /**
      * @default true
      * @description 若为true: 多个图形的move距离不同, duration相同, 使多个图形同时抵达目标位置;  若为false: 多个图形move的距离相同, duration相同, 即可使多个图形达到相同的速度, 以保持图形的相对位置不变.
      */
     isVariableSpeed?: boolean;
     duration?: number;
-    easing?: string;
+    easing?: EasingType;
   };
 }
 
@@ -30,7 +30,7 @@ export interface IWipeInParams extends IAnimationParams {
      */
     from?: 'left' | 'right' | 'top' | 'bottom' | 'stroke';
     duration?: number;
-    easing?: string;
+    easing?: EasingType;
   };
 }
 
@@ -42,7 +42,7 @@ export interface IScaleInParams extends IAnimationParams {
      */
     ratio?: number;
     duration?: number;
-    easing?: string;
+    easing?: EasingType;
   };
 }
 
@@ -54,7 +54,7 @@ export interface IFadeInParams extends IAnimationParams {
      */
     opacity?: number;
     duration?: number;
-    easing?: string;
+    easing?: EasingType;
     /**
      * 作用于全局的透明度
      * @default false
@@ -136,6 +136,26 @@ export function moveIn(graphic: IGraphic, params: IMoveInParams) {
         // 从上往下进入
         fromY = -height;
         break;
+      case 'top-right':
+        // 从右上进入 ↗️
+        fromY = -height;
+        fromX = graphic.parent.width;
+        break;
+      case 'top-left':
+        // 从左上进入 ↖️
+        fromY = -height;
+        fromX = -width;
+        break;
+      case 'bottom-left':
+        // 从左下进入 ↙️
+        fromY = graphic.parent.height + height;
+        fromX = -width;
+        break;
+      case 'bottom-right':
+        // 从右下进入 ↘️
+        fromY = graphic.parent.height + height;
+        fromX = graphic.parent.width;
+        break;
     }
   } else {
     // 速度相同, 相对位置不变, 但不同时出现.
@@ -157,6 +177,26 @@ export function moveIn(graphic: IGraphic, params: IMoveInParams) {
         // 从上往下进入
         fromY += -distance;
         break;
+      case 'top-right':
+        // 从右上进入 ↗️
+        fromX += distance;
+        fromY += -distance;
+        break;
+      case 'top-left':
+        // 从左上进入 ↖️
+        fromX += -distance;
+        fromY += -distance;
+        break;
+      case 'bottom-left':
+        // 从左下进入 ↙️
+        fromY += distance;
+        fromX += -distance;
+        break;
+      case 'bottom-right':
+        // 从右下进入 ↘️
+        fromX += distance;
+        fromY += distance;
+        break;
     }
   }
 
diff --git a/packages/vstory/src/dsl/types/common/index.ts b/packages/vstory/src/dsl/types/common/index.ts
index 66525688..892b6713 100644
--- a/packages/vstory/src/dsl/types/common/index.ts
+++ b/packages/vstory/src/dsl/types/common/index.ts
@@ -1,7 +1,9 @@
+import type { EasingType } from '@visactor/vrender-core';
+
 export interface IAnimationParams {
   duration: number;
-  easing?: string;
+  easing?: EasingType;
   loop?: number | boolean;
 }
 
-export * from './Flicker';
+export * from './flicker';
diff --git a/packages/vstory/src/dsl/types/graphic/appear.ts b/packages/vstory/src/dsl/types/graphic/appear.ts
index eb536eac..e1c4012f 100644
--- a/packages/vstory/src/dsl/types/graphic/appear.ts
+++ b/packages/vstory/src/dsl/types/graphic/appear.ts
@@ -1,3 +1,4 @@
+import type { IMoveInParams } from '../../story-processor/graphic/effect/appear';
 import type { IAction, IAnimationParams, IActionPayload } from '../index';
 
 export interface IGraphicAppearPayLoad extends IActionPayload {
@@ -28,9 +29,7 @@ export interface IGraphicAppearPayLoad extends IActionPayload {
     /**
      * 移动行为
      */
-    move?: {
-      from?: 'top' | 'right' | 'bottom' | 'left';
-    };
+    move?: IMoveInParams['move'];
   };
 }