diff --git a/packages/vstory/demo/src/assets/scene10/bg-decoration.png b/packages/vstory/demo/src/assets/scene10/bg-decoration.png new file mode 100644 index 00000000..59fac62b Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/bg-decoration.png differ diff --git a/packages/vstory/demo/src/assets/scene10/chart.png b/packages/vstory/demo/src/assets/scene10/chart.png new file mode 100644 index 00000000..1730b512 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene10/person.png b/packages/vstory/demo/src/assets/scene10/person.png new file mode 100644 index 00000000..3f85850d Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/person.png differ diff --git a/packages/vstory/demo/src/assets/scene10/text-en.png b/packages/vstory/demo/src/assets/scene10/text-en.png new file mode 100644 index 00000000..23e0ea16 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene10/text-zh.png b/packages/vstory/demo/src/assets/scene10/text-zh.png new file mode 100644 index 00000000..50e72943 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene10/title.png b/packages/vstory/demo/src/assets/scene10/title.png new file mode 100644 index 00000000..5874e426 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene10/title.png differ diff --git a/packages/vstory/demo/src/assets/scene11/bg-decoration.png b/packages/vstory/demo/src/assets/scene11/bg-decoration.png new file mode 100644 index 00000000..a8a0394c Binary files /dev/null and b/packages/vstory/demo/src/assets/scene11/bg-decoration.png differ diff --git a/packages/vstory/demo/src/assets/scene11/chart.png b/packages/vstory/demo/src/assets/scene11/chart.png new file mode 100644 index 00000000..11a1d465 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene11/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene11/text-en.png b/packages/vstory/demo/src/assets/scene11/text-en.png new file mode 100644 index 00000000..7a580837 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene11/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene11/text-zh.png b/packages/vstory/demo/src/assets/scene11/text-zh.png new file mode 100644 index 00000000..52822d1e Binary files /dev/null and b/packages/vstory/demo/src/assets/scene11/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene11/title.png b/packages/vstory/demo/src/assets/scene11/title.png new file mode 100644 index 00000000..046ed29b Binary files /dev/null and b/packages/vstory/demo/src/assets/scene11/title.png differ diff --git a/packages/vstory/demo/src/assets/scene12-2/chart.png b/packages/vstory/demo/src/assets/scene12-2/chart.png new file mode 100644 index 00000000..c270d15b Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12-2/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene12-2/text-en.png b/packages/vstory/demo/src/assets/scene12-2/text-en.png new file mode 100644 index 00000000..0409a666 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12-2/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene12-2/text-zh.png b/packages/vstory/demo/src/assets/scene12-2/text-zh.png new file mode 100644 index 00000000..047c38f6 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12-2/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene12-2/title.png b/packages/vstory/demo/src/assets/scene12-2/title.png new file mode 100644 index 00000000..eb610fc7 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12-2/title.png differ diff --git a/packages/vstory/demo/src/assets/scene12/bg-decoration.png b/packages/vstory/demo/src/assets/scene12/bg-decoration.png new file mode 100644 index 00000000..4619d461 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12/bg-decoration.png differ diff --git a/packages/vstory/demo/src/assets/scene12/chart.png b/packages/vstory/demo/src/assets/scene12/chart.png new file mode 100644 index 00000000..5f015914 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene12/text-en.png b/packages/vstory/demo/src/assets/scene12/text-en.png new file mode 100644 index 00000000..a805b143 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene12/text-zh.png b/packages/vstory/demo/src/assets/scene12/text-zh.png new file mode 100644 index 00000000..44fa4714 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene12/title.png b/packages/vstory/demo/src/assets/scene12/title.png new file mode 100644 index 00000000..4c118392 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene12/title.png differ diff --git a/packages/vstory/demo/src/assets/scene13/logo.png b/packages/vstory/demo/src/assets/scene13/logo.png new file mode 100644 index 00000000..dec8e16d Binary files /dev/null and b/packages/vstory/demo/src/assets/scene13/logo.png differ diff --git a/packages/vstory/demo/src/assets/scene9/bg-decoration.png b/packages/vstory/demo/src/assets/scene9/bg-decoration.png new file mode 100644 index 00000000..f3fec787 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/bg-decoration.png differ diff --git a/packages/vstory/demo/src/assets/scene9/chart.png b/packages/vstory/demo/src/assets/scene9/chart.png new file mode 100644 index 00000000..03f4894b Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene9/person.png b/packages/vstory/demo/src/assets/scene9/person.png new file mode 100644 index 00000000..381d3cb8 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/person.png differ diff --git a/packages/vstory/demo/src/assets/scene9/text-en.png b/packages/vstory/demo/src/assets/scene9/text-en.png new file mode 100644 index 00000000..ba141fca Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene9/text-zh.png b/packages/vstory/demo/src/assets/scene9/text-zh.png new file mode 100644 index 00000000..d0dce49c Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene9/title.png b/packages/vstory/demo/src/assets/scene9/title.png new file mode 100644 index 00000000..43cada93 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene9/title.png differ diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx index b8dcc9d9..36678a5e 100644 --- a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { act, useEffect } from 'react'; import { IStorySpec } from '../../../../src/story/interface'; import { Story } from '../../../../src/story/story'; import { scene1, scene1Characters } from './scene1'; @@ -9,6 +9,12 @@ import { scene5, scene5Characters } from './scene5'; import { scene6, scene6Characters } from './scene6'; import { scene7, scene7Characters } from './scene7'; import { scene8, scene8Characters } from './scene8'; +import { scene9, scene9Characters } from './scene9'; +import { scene10, scene10Characters } from './scene10'; +import { scene11, scene11Characters } from './scene11'; +import { scene12, scene12Characters } from './scene12'; +import { scene12_2, scene12_2_Characters } from './scene12-2'; +import { scene13, scene13Characters } from './scene13'; export const VChartSiteDemo = () => { const id = 'storyBar'; @@ -18,24 +24,38 @@ export const VChartSiteDemo = () => { const tempSpec: IStorySpec = { characters: [ ...scene1Characters, - ...scene2Characters - // ...scene3Characters, - // ...scene4Characters, - // ...scene5Characters, - // ...scene6Characters, - // ...scene7Characters, - // ...scene8Characters + ...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 + scene2, + scene3, + scene4, + scene5, + scene6, + scene7, + scene8, + scene9, + scene10, + scene11, + scene12, + scene12_2, + scene13 ] } ] @@ -49,6 +69,25 @@ export const VChartSiteDemo = () => { btn1.addEventListener('click', () => { story.play(); }); + + { + let paused = false; + let actIndex: string | number = 0; + document.addEventListener('keydown', function (event) { + if (event.code === 'Space') { + if (paused) { + story.play(actIndex); + paused = false; + console.log(111111, 'continue', actIndex); + } else { + actIndex = story.pause(); + paused = true; + console.log(111111, 'pause', actIndex); + } + } + }); + } + const btn2 = document.createElement('button'); btn2.innerText = 'export'; btn2.addEventListener('click', () => { diff --git a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx index 20d69084..7479d754 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx @@ -28,7 +28,6 @@ const chartSpecList = [ ] } ], - direction: 'horizontal', seriesSpec: [ { @@ -845,6 +844,8 @@ const chartSpecList = [ valueField: 'value', outerRadius: 1, innerRadius: 0, + gap: 1, + sunburst: { style: { stroke: false, lineWidth: 0 } }, label: { visible: false } @@ -873,7 +874,7 @@ export const scene1Characters = chartSpecList.map((item, i) => ({ zIndex: 1, position: { top: i < 5 ? 50 : 570, - left: 100 + (i % 5) * 170 + 20, + left: 220 + (i % 5) * (110 + 72), width: 110, height: 110 }, @@ -1011,7 +1012,8 @@ export const scene1 = { payload: { animation: { duration: 1000 - } + }, + fade: { isBaseOpacity: true } } } ] diff --git a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx new file mode 100644 index 00000000..5c46bb89 --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx @@ -0,0 +1,409 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene10Person from '../../assets/scene10/person.png'; +import scene10BgDecoration from '../../assets/scene10/bg-decoration.png'; +import scene10TextEn from '../../assets/scene10/text-en.png'; +import scene10TextZh from '../../assets/scene10/text-zh.png'; +import scene10Title from '../../assets/scene10/title.png'; +import scene10Chart from '../../assets/scene10/chart.png'; + +import { easeInOutQuad } from './util'; +const mockData: any[] = []; +const types = ['A', 'B']; + +types.forEach(type => { + for (let i = 1; i <= 12; i++) { + mockData.push({ month: i + '月', value: Math.random() * 100 + 10, type }); + } +}); + +const chartSpec = { + type: 'radar', + background: 'transparent', + data: [ + { + values: mockData + } + ], + categoryField: 'month', + valueField: 'value', + seriesField: 'type', // 声明分组字段, + outerRadius: 0.8, + color: ['#27711B', '#A64260'], + area: { + visible: true + }, + line: { + style: { + lineWidth: 1 + } + }, + axes: [ + { + orient: 'radius', // 半径轴配置 + grid: { + smooth: true, // 平滑的网格线 + style: { + lineDash: [0] + }, + alternateColor: 'rgba(255, 255, 255, 0.2)' // 配置栅格线间的背景色 + } + }, + { + orient: 'angle', // 角度轴配置 + tick: { + visible: false + }, + domainLine: { + visible: true, + style: { + stroke: '#333' + } + }, + grid: { + style: { + lineDash: [0] + } + }, + label: { + style: { + fill: '#ffffff' + } + } + } + ], + legends: { + visible: false, + orient: 'top' + } +}; + +export const scene10Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene10-background`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1440, + height: 810 + }, + options: { + graphic: { + stroke: false, + fill: '#2E4254' + } + } + }, + { + type: 'ImageComponent', + id: `scene10-person`, + zIndex: 1, + position: { + top: 246, + left: 844, + width: 445, + height: 564 + }, + options: { + graphic: { + image: scene10Person + } + } + }, + { + type: 'ImageComponent', + id: `scene10-title`, + zIndex: 1, + position: { + top: 160, + left: 192, + width: 334, + height: 100 + }, + options: { + graphic: { + image: scene10Title + } + } + }, + { + type: 'ImageComponent', + id: `scene10-bg-decoration`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1340, + height: 494 + }, + options: { + graphic: { + image: scene10BgDecoration + } + } + }, + { + type: 'ImageComponent', + id: `scene10-text-zh`, + zIndex: 0, + position: { + top: 462, + left: 190, + width: 240, + height: 96 + }, + options: { + graphic: { + image: scene10TextZh + } + } + }, + { + type: 'ImageComponent', + id: `scene10-text-en`, + zIndex: 0, + position: { + top: 344, + left: 526, + width: 272, + height: 80 + }, + options: { + graphic: { + image: scene10TextEn + } + } + }, + { + type: 'ImageComponent', + id: `scene10-chart-image`, + zIndex: 0, + position: { + top: 472, + left: 526, + width: 320, + height: 338 + }, + options: { + graphic: { + image: scene10Chart + } + } + }, + { + type: 'RadarChart', + id: `scene10-radar-chart`, + zIndex: 3, + position: { + top: 494, + left: 526, + width: 320, + height: 320 + }, + options: { + spec: chartSpec, + panel: { + fill: '#C6B0B7' + } + } + } +]; + +export const scene10: ISceneSpec = { + id: 'scene10', + delay: -1000, + actions: [ + { + characterId: 'scene10-background', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-person', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'right' + } + } + } + } + ] + }, + { + characterId: 'scene10-title', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-bg-decoration', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-text-zh', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-text-en', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-chart-image', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene10-radar-chart', + characterActions: [ + { + action: 'appear', + startTime: 2500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'grow', + fade: { + isBaseOpacity: true + } + } + } + }, + { + action: 'disappear', + startTime: 5000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + fade: { + isBaseOpacity: true + } + } + } + } + ] + } + ] +}; + +scene10.actions.forEach(({ characterId, characterActions }) => { + if (characterId.includes('background') || characterId.includes('decoration')) { + characterActions.push({ + action: 'disappear', + startTime: 7500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + }); + } else { + characterActions.push({ + action: 'disappear', + startTime: 7500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + to: 'bottom' + }, + fade: { + opacity: 0 + } + } + } + }); + } +}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx new file mode 100644 index 00000000..daba876d --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx @@ -0,0 +1,497 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene11BgDecoration from '../../assets/scene11/bg-decoration.png'; +import scene11TextEn from '../../assets/scene11/text-en.png'; +import scene11TextZh from '../../assets/scene11/text-zh.png'; +import scene11Title from '../../assets/scene11/title.png'; +import scene11Chart from '../../assets/scene11/chart.png'; + +import { easeInOutQuad } from './util'; + +// TODO: 原 demo 是 3D 词云，目前显示有问题。 +const chartSpec = { + background: 'transparent', + type: 'wordCloud', + // 待申请新外网可访问的存储空间后更换 + maskShape: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg', + nameField: 'challenge_name', + valueField: 'sum_count', + seriesField: 'challenge_name', + padding: 0, + data: [ + { + name: 'data', + values: [ + { + challenge_name: '刘浩存', + sum_count: 957 + }, + { + challenge_name: '刘昊然', + sum_count: 942 + }, + { + challenge_name: '喜欢', + sum_count: 842 + }, + { + challenge_name: '真的', + sum_count: 828 + }, + { + challenge_name: '四海', + sum_count: 665 + }, + { + challenge_name: '好看', + sum_count: 627 + }, + { + challenge_name: '评论', + sum_count: 574 + }, + { + challenge_name: '好像', + sum_count: 564 + }, + { + challenge_name: '沈腾', + sum_count: 554 + }, + { + challenge_name: '不像', + sum_count: 540 + }, + { + challenge_name: '多少钱', + sum_count: 513 + }, + { + challenge_name: '韩寒', + sum_count: 513 + }, + { + challenge_name: '不知道', + sum_count: 499 + }, + { + challenge_name: '感觉', + sum_count: 499 + }, + { + challenge_name: '尹正', + sum_count: 495 + }, + { + challenge_name: '不看', + sum_count: 487 + }, + { + challenge_name: '奥特之父', + sum_count: 484 + }, + { + challenge_name: '阿姨', + sum_count: 482 + }, + { + challenge_name: '支持', + sum_count: 482 + }, + { + challenge_name: '父母', + sum_count: 479 + }, + { + challenge_name: '一条', + sum_count: 462 + }, + { + challenge_name: '女主', + sum_count: 456 + }, + { + challenge_name: '确实', + sum_count: 456 + }, + { + challenge_name: '票房', + sum_count: 456 + }, + { + challenge_name: '无语', + sum_count: 443 + }, + { + challenge_name: '干干净净', + sum_count: 443 + }, + { + challenge_name: '为啥', + sum_count: 426 + }, + { + challenge_name: '爱情', + sum_count: 425 + }, + { + challenge_name: '喜剧', + sum_count: 422 + }, + { + challenge_name: '春节', + sum_count: 414 + }, + { + challenge_name: '剧情', + sum_count: 414 + }, + { + challenge_name: '人生', + sum_count: 409 + }, + { + challenge_name: '风格', + sum_count: 408 + }, + { + challenge_name: '演员', + sum_count: 403 + }, + { + challenge_name: '成长', + sum_count: 403 + }, + { + challenge_name: '玩意', + sum_count: 402 + }, + { + challenge_name: '文学', + sum_count: 397 + } + ] + } + ], + word: { + style: { + keepDirIn3d: false + } + }, + fillingWord: { + style: { + keepDirIn3d: false + } + }, + depth_3d: 200, + colorList: ['#325AB4'], + wordCloudShapeConfig: { + fillingColorList: ['#5BB5BF', '#92C8C6'] + } +}; + +export const scene11Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene11-background`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1440, + height: 810 + }, + options: { + graphic: { + stroke: false, + fill: '#FAFAFA' + } + } + }, + { + type: 'ImageComponent', + id: `scene11-bg-decoration`, + zIndex: 0, + position: { + top: 180, + left: 170, + width: 1125, + height: 562 + }, + options: { + graphic: { + image: scene11BgDecoration + } + } + }, + { + type: 'ImageComponent', + id: `scene11-title`, + zIndex: 0, + position: { + top: 158, + left: 766, + width: 516, + height: 168 + }, + options: { + graphic: { + image: scene11Title + } + } + }, + { + type: 'ImageComponent', + id: `scene11-text-en`, + zIndex: 0, + position: { + top: 394, + left: 842, + width: 440, + height: 110 + }, + options: { + graphic: { + image: scene11TextEn + } + } + }, + { + type: 'ImageComponent', + id: `scene11-text-zh`, + zIndex: 0, + position: { + top: 595, + left: 156, + width: 270, + height: 117 + }, + options: { + graphic: { + image: scene11TextZh + } + } + }, + { + type: 'ImageComponent', + id: `scene11-chart-image`, + zIndex: 0, + position: { + top: 150, + left: 156, + width: 450, + height: 269 + }, + options: { + graphic: { + image: scene11Chart + } + } + }, + { + type: 'WordCloudChart', + id: `scene11-wordcloud-chart`, + zIndex: 0, + position: { + top: 150, + left: 156, + width: 450, + height: 269 + }, + options: { + panel: { fill: '#eeeeee' }, + spec: chartSpec + } + } +]; + +export const scene11: ISceneSpec = { + id: 'scene11', + delay: -1000, + actions: [ + { + characterId: 'scene11-background', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene11-bg-decoration', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene11-title', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene11-text-en', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene11-text-zh', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene11-chart-image', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene11-wordcloud-chart', + characterActions: [ + { + action: 'appear', + startTime: 2000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + fade: { + isBaseOpacity: true + } + } + } + }, + { + action: 'disappear', + startTime: 4500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + fade: { + opacity: 0, + isBaseOpacity: true + } + } + } + } + ] + } + ] +}; + +scene11.actions.forEach(({ characterId, characterActions }) => { + if (characterId.includes('background') || characterId.includes('decoration')) { + characterActions.push({ + action: 'disappear', + startTime: 7000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade' + } + } + }); + } else { + const character = scene11Characters.find(character => character.id === characterId); + if (character) { + const { top, left } = character.position; + characterActions.push({ + action: 'style', + startTime: 7000, + duration: 1000, + payload: { + graphic: { + x: 960 - left, + y: 480 - top, + width: 2, + height: 2, + opacity: 0 + }, + animation: { + duration: 1000, + easing: easeInOutQuad + } + } + }); + } + } +}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx new file mode 100644 index 00000000..4db3cc53 --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx @@ -0,0 +1,629 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene12_2_TextEn from '../../assets/scene12-2/text-en.png'; +import scene12_2_TextZh from '../../assets/scene12-2/text-zh.png'; +import scene12_2_Title from '../../assets/scene12-2/title.png'; +import scene12_2_Chart from '../../assets/scene12-2/chart.png'; + +import { easeInOutQuad } from './util'; +const getData = () => [ + { + name: 'query', + children: [ + { + name: 'methods', + children: [ + { name: 'add', value: 593 }, + { name: 'and', value: 330 }, + { name: 'average', value: 287 }, + { name: 'count', value: 277 }, + { name: 'distinct', value: 292 }, + { name: 'div', value: 595 }, + { name: 'eq', value: 594 }, + { name: 'fn', value: 460 }, + { name: 'gt', value: 603 }, + { name: 'gte', value: 625 }, + { name: 'iff', value: 748 }, + { name: 'isa', value: 461 }, + { name: 'lt', value: 597 }, + { name: 'lte', value: 619 }, + { name: 'max', value: 283 }, + { name: 'min', value: 283 }, + { name: 'mod', value: 591 }, + { name: 'mul', value: 603 }, + { name: 'neq', value: 599 }, + { name: 'not', value: 386 }, + { name: 'or', value: 323 }, + { name: 'orderby', value: 307 }, + { name: 'range', value: 772 }, + { name: 'select', value: 296 }, + { name: 'stddev', value: 363 }, + { name: 'sub', value: 600 }, + { name: 'sum', value: 280 }, + { name: 'update', value: 307 }, + { name: 'variance', value: 335 }, + { name: 'where', value: 299 }, + { name: 'xor', value: 354 }, + { name: '_', value: 264 } + ] + }, + { name: 'AggregateExpression', value: 1616 }, + { name: 'And', value: 1027 }, + { name: 'Arithmetic', value: 3891 }, + { name: 'Average', value: 891 }, + { name: 'BinaryExpression', value: 2893 }, + { name: 'Comparison', value: 5103 }, + { name: 'CompositeExpression', value: 3677 }, + { name: 'Count', value: 781 }, + { name: 'DateUtil', value: 4141 }, + { name: 'Distinct', value: 933 }, + { name: 'Expression', value: 5130 }, + { name: 'ExpressionIterator', value: 3617 }, + { name: 'Fn', value: 3240 }, + { name: 'If', value: 2732 }, + { name: 'IsA', value: 2039 }, + { name: 'Literal', value: 1214 }, + { name: 'Match', value: 3748 }, + { name: 'Maximum', value: 843 }, + { name: 'Minimum', value: 843 }, + { name: 'Not', value: 1554 }, + { name: 'Or', value: 970 }, + { name: 'Query', value: 13896 }, + { name: 'Range', value: 1594 }, + { name: 'StringUtil', value: 4130 }, + { name: 'Sum', value: 791 }, + { name: 'Variable', value: 1124 }, + { name: 'Variance', value: 1876 }, + { name: 'Xor', value: 1101 } + ] + }, + { + name: 'util', + children: [ + { + name: 'palette', + children: [ + { name: 'ColorPalette', value: 6367 }, + { name: 'Palette', value: 1229 }, + { name: 'ShapePalette', value: 2059 }, + { name: 'valuePalette', value: 2291 } + ] + }, + { + name: 'math', + children: [ + { name: 'DenseMatrix', value: 3165 }, + { name: 'IMatrix', value: 2815 }, + { name: 'SparseMatrix', value: 3366 } + ] + }, + { + name: 'heap', + children: [ + { name: 'FibonacciHeap', value: 9354 }, + { name: 'HeapNode', value: 1233 } + ] + }, + { name: 'Arrays', value: 8258 }, + { name: 'Colors', value: 10001 }, + { name: 'Dates', value: 8217 }, + { name: 'Displays', value: 12555 }, + { name: 'Filter', value: 2324 }, + { name: 'Geometry', value: 10993 }, + { name: 'IEvaluable', value: 335 }, + { name: 'IPredicate', value: 383 }, + { name: 'IValueProxy', value: 874 }, + { name: 'Maths', value: 17705 }, + { name: 'Orientation', value: 1486 }, + { name: 'Property', value: 5559 }, + { name: 'Shapes', value: 19118 }, + { name: 'Sort', value: 6887 }, + { name: 'Stats', value: 6557 }, + { name: 'Strings', value: 22026 } + ] + }, + { + name: 'animate', + children: [ + { + name: 'interpolate', + children: [ + { name: 'ArrayInterpolator', value: 1983 }, + { name: 'ColorInterpolator', value: 2047 }, + { name: 'DateInterpolator', value: 1375 }, + { name: 'Interpolator', value: 8746 }, + { name: 'MatrixInterpolator', value: 2202 }, + { name: 'NumberInterpolator', value: 1382 }, + { name: 'ObjectInterpolator', value: 1629 }, + { name: 'PointInterpolator', value: 1675 }, + { name: 'RectangleInterpolator', value: 2042 } + ] + }, + { name: 'Easing', value: 17010 }, + { name: 'FunctionSequence', value: 5842 }, + { name: 'ISchedulable', value: 1041 }, + { name: 'Parallel', value: 5176 }, + { name: 'Pause', value: 449 }, + { name: 'Scheduler', value: 5593 }, + { name: 'Sequence', value: 5534 }, + { name: 'Transition', value: 9201 }, + { name: 'Transitioner', value: 19975 }, + { name: 'TransitionEvent', value: 1116 }, + { name: 'Tween', value: 6006 } + ] + }, + { + name: 'scale', + children: [ + { name: 'IScaleMap', value: 2105 }, + { name: 'LinearScale', value: 1316 }, + { name: 'LogScale', value: 3151 }, + { name: 'OrdinalScale', value: 3770 }, + { name: 'QuantileScale', value: 2435 }, + { name: 'QuantitativeScale', value: 4839 }, + { name: 'RootScale', value: 1756 }, + { name: 'Scale', value: 4268 }, + { name: 'ScaleType', value: 1821 }, + { name: 'TimeScale', value: 5833 } + ] + }, + { + name: 'physics', + children: [ + { name: 'DragForce', value: 1082 }, + { name: 'GravityForce', value: 1336 }, + { name: 'IForce', value: 319 }, + { name: 'NBodyForce', value: 10498 }, + { name: 'Particle', value: 2822 }, + { name: 'Simulation', value: 9983 }, + { name: 'Spring', value: 2213 }, + { name: 'SpringForce', value: 1681 } + ] + }, + { + name: 'data', + children: [ + { + name: 'converters', + children: [ + { name: 'Converters', value: 721 }, + { name: 'DelimitedTextConverter', value: 4294 }, + { name: 'GraphMLConverter', value: 9800 }, + { name: 'IDataConverter', value: 1314 }, + { name: 'JSONConverter', value: 2220 } + ] + }, + { name: 'DataField', value: 1759 }, + { name: 'DataSchema', value: 2165 }, + { name: 'DataSet', value: 586 }, + { name: 'DataSource', value: 3331 }, + { name: 'DataTable', value: 772 }, + { name: 'DataUtil', value: 3322 } + ] + }, + { + name: 'vis', + children: [ + { + name: 'controls', + children: [ + { name: 'AnchorControl', value: 2138 }, + { name: 'ClickControl', value: 3824 }, + { name: 'Control', value: 1353 }, + { name: 'ControlList', value: 4665 }, + { name: 'DragControl', value: 2649 }, + { name: 'ExpandControl', value: 2832 }, + { name: 'HoverControl', value: 4896 }, + { name: 'IControl', value: 763 }, + { name: 'PanZoomControl', value: 5222 }, + { name: 'SelectionControl', value: 7862 }, + { name: 'TooltipControl', value: 8435 } + ] + }, + { + name: 'operator', + children: [ + { + name: 'layout', + children: [ + { name: 'AxisLayout', value: 6725 }, + { name: 'BundledEdgeRouter', value: 3727 }, + { name: 'CircleLayout', value: 9317 }, + { name: 'CirclePackingLayout', value: 12003 }, + { name: 'DendrogramLayout', value: 4853 }, + { name: 'ForceDirectedLayout', value: 8411 }, + { name: 'IcicleTreeLayout', value: 4864 }, + { name: 'IndentedTreeLayout', value: 3174 }, + { name: 'Layout', value: 7881 }, + { name: 'NodeLinkTreeLayout', value: 12870 }, + { name: 'PieLayout', value: 2728 }, + { name: 'RadialTreeLayout', value: 12348 }, + { name: 'RandomLayout', value: 870 }, + { name: 'StackedAreaLayout', value: 9121 }, + { name: 'TreeMapLayout', value: 9191 } + ] + }, + { + name: 'encoder', + children: [ + { name: 'ColorEncoder', value: 3179 }, + { name: 'Encoder', value: 4060 }, + { name: 'PropertyEncoder', value: 4138 }, + { name: 'ShapeEncoder', value: 1690 }, + { name: 'valueEncoder', value: 1830 } + ] + }, + { + name: 'distortion', + children: [ + { name: 'BifocalDistortion', value: 4461 }, + { name: 'Distortion', value: 6314 }, + { name: 'FisheyeDistortion', value: 3444 } + ] + }, + { + name: 'filter', + children: [ + { name: 'FisheyeTreeFilter', value: 5219 }, + { name: 'GraphDistanceFilter', value: 3165 }, + { name: 'VisibilityFilter', value: 3509 } + ] + }, + { + name: 'label', + children: [ + { name: 'Labeler', value: 9956 }, + { name: 'RadialLabeler', value: 3899 }, + { name: 'StackedAreaLabeler', value: 3202 } + ] + }, + { name: 'IOperator', value: 1286 }, + { name: 'Operator', value: 2490 }, + { name: 'OperatorList', value: 5248 }, + { name: 'OperatorSequence', value: 4190 }, + { name: 'OperatorSwitch', value: 2581 }, + { name: 'SortOperator', value: 2023 } + ] + }, + { + name: 'data', + children: [ + { + name: 'render', + children: [ + { name: 'ArrowType', value: 698 }, + { name: 'EdgeRenderer', value: 5569 }, + { name: 'IRenderer', value: 353 }, + { name: 'ShapeRenderer', value: 2247 } + ] + }, + { name: 'Data', value: 20544 }, + { name: 'DataList', value: 19788 }, + { name: 'DataSprite', value: 10349 }, + { name: 'EdgeSprite', value: 3301 }, + { name: 'NodeSprite', value: 19382 }, + { name: 'ScaleBinding', value: 11275 }, + { name: 'Tree', value: 7147 }, + { name: 'TreeBuilder', value: 9930 } + ] + }, + { + name: 'axis', + children: [ + { name: 'Axes', value: 1302 }, + { name: 'Axis', value: 24593 }, + { name: 'AxisGridLine', value: 652 }, + { name: 'AxisLabel', value: 636 }, + { name: 'CartesianAxes', value: 6703 } + ] + }, + { + name: 'events', + children: [ + { name: 'DataEvent', value: 2313 }, + { name: 'SelectionEvent', value: 1880 }, + { name: 'TooltipEvent', value: 1701 }, + { name: 'VisualizationEvent', value: 1117 } + ] + }, + { + name: 'legend', + children: [ + { name: 'Legend', value: 20859 }, + { name: 'LegendItem', value: 4614 }, + { name: 'LegendRange', value: 10530 } + ] + }, + { name: 'Visualization', value: 16540 } + ] + }, + { + name: 'display', + children: [ + { name: 'DirtySprite', value: 8833 }, + { name: 'LineSprite', value: 1732 }, + { name: 'RectSprite', value: 3623 }, + { name: 'TextSprite', value: 10066 } + ] + }, + { + name: 'analytics', + children: [ + { + name: 'graph', + children: [ + { name: 'BetweennessCentrality', value: 3534 }, + { name: 'LinkDistance', value: 5731 }, + { name: 'MaxFlowMinCut', value: 7840 }, + { name: 'ShortestPaths', value: 5914 }, + { name: 'SpanningTree', value: 3416 } + ] + }, + { + name: 'cluster', + children: [ + { name: 'AgglomerativeCluster', value: 3938 }, + { name: 'CommunityStructure', value: 3812 }, + { name: 'HierarchicalCluster', value: 6714 }, + { name: 'MergeEdge', value: 743 } + ] + }, + { + name: 'optimization', + children: [{ name: 'AspectRatioBanker', value: 7074 }] + } + ] + }, + { name: 'flex', children: [{ name: 'FlareVis', value: 4116 }] } +]; + +const chartSpec = { + type: 'sunburst', + offsetX: 0, + offsetY: 0, + padding: 0, + categoryField: 'name', + valueField: 'value', + outerRadius: 1, + innerRadius: 0, + gap: 2, + drill: true, + labelLayout: { + align: 'center', + rotate: 'radial' + }, + sunburst: { + visible: true, + style: { + fillOpacity: (datum: any) => { + return datum.isLeaf ? 0.4 : 0.8; + } + } + }, + label: { visible: false }, + data: [ + { + id: 'data', + values: getData().slice(0, 5) + } + ], + animationEnter: { + easing: 'cubicInOut', + duration: 1000 + }, + animationExit: { + easing: 'cubicInOut', + duration: 1000 + }, + animationUpdate: { + easing: 'cubicInOut', + duration: 1000 + } +}; + +export const scene12_2_Characters: ICharacterSpec[] = [ + { + type: 'ImageComponent', + id: `scene12_2-title`, + zIndex: 0, + position: { + top: 190, + left: 168, + width: 282, + height: 124 + }, + options: { + graphic: { + image: scene12_2_Title + } + } + }, + { + type: 'ImageComponent', + id: `scene12_2-chart-image`, + zIndex: 1, + position: { + top: 120, + left: 100, + width: 1140, + height: 660 + }, + options: { + graphic: { + image: scene12_2_Chart + } + } + }, + { + type: 'ImageComponent', + id: `scene12_2-text-zh`, + zIndex: 0, + position: { + top: 444, + left: 168, + width: 284, + height: 56 + }, + options: { + graphic: { + image: scene12_2_TextZh + } + } + }, + { + type: 'ImageComponent', + id: `scene12_2-text-en`, + zIndex: 0, + position: { + top: 584, + left: 168, + width: 284, + height: 66 + }, + options: { + graphic: { + image: scene12_2_TextEn + } + } + }, + { + type: 'SunburstChart', + id: `scene12_2-sunburst-chart`, + zIndex: 1, + position: { + top: 224, + left: 750, + width: 300, + height: 232 + }, + options: { + spec: chartSpec, + panel: { fill: 'white' } + } + } +]; + +export const scene12_2: ISceneSpec = { + id: 'scene12_2', + delay: -1000, + actions: [ + { + characterId: 'scene12_2-title', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { from: 'right', isVariableSpeed: false } + } + } + } + ] + }, + { + characterId: 'scene12_2-chart-image', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { from: 'right', isVariableSpeed: false } + } + } + } + ] + }, + { + characterId: 'scene12_2-text-zh', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { from: 'right', isVariableSpeed: false } + } + } + } + ] + }, + { + characterId: 'scene12_2-text-en', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { from: 'right', isVariableSpeed: false } + } + } + } + ] + }, + { + characterId: 'scene12_2-sunburst-chart', + characterActions: [ + { + action: 'appear', + startTime: 3000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'centerGrow', + fade: { isBaseOpacity: true } + } + } + }, + { + action: 'disappear', + startTime: 5500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade', + fade: { isBaseOpacity: true } + } + } + } + ] + } + ] +}; + +scene12_2.actions.forEach(({ characterId, characterActions }) => { + if (characterId.includes('background') || characterId.includes('decoration')) { + // do nothing + } else { + characterActions.push({ + action: 'disappear', + startTime: 7000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade' + } + } + }); + } +}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx new file mode 100644 index 00000000..7a71d4cb --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx @@ -0,0 +1,720 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene12BgDecoration from '../../assets/scene12/bg-decoration.png'; +import scene12TextEn from '../../assets/scene12/text-en.png'; +import scene12TextZh from '../../assets/scene12/text-zh.png'; +import scene12Title from '../../assets/scene12/title.png'; +import scene12Chart from '../../assets/scene12/chart.png'; + +import { easeInOutQuad } from './util'; + +const getData = () => [ + { + name: 'query', + children: [ + { + name: 'methods', + children: [ + { name: 'add', value: 593 }, + { name: 'and', value: 330 }, + { name: 'average', value: 287 }, + { name: 'count', value: 277 }, + { name: 'distinct', value: 292 }, + { name: 'div', value: 595 }, + { name: 'eq', value: 594 }, + { name: 'fn', value: 460 }, + { name: 'gt', value: 603 }, + { name: 'gte', value: 625 }, + { name: 'iff', value: 748 }, + { name: 'isa', value: 461 }, + { name: 'lt', value: 597 }, + { name: 'lte', value: 619 }, + { name: 'max', value: 283 }, + { name: 'min', value: 283 }, + { name: 'mod', value: 591 }, + { name: 'mul', value: 603 }, + { name: 'neq', value: 599 }, + { name: 'not', value: 386 }, + { name: 'or', value: 323 }, + { name: 'orderby', value: 307 }, + { name: 'range', value: 772 }, + { name: 'select', value: 296 }, + { name: 'stddev', value: 363 }, + { name: 'sub', value: 600 }, + { name: 'sum', value: 280 }, + { name: 'update', value: 307 }, + { name: 'variance', value: 335 }, + { name: 'where', value: 299 }, + { name: 'xor', value: 354 }, + { name: '_', value: 264 } + ] + }, + { name: 'AggregateExpression', value: 1616 }, + { name: 'And', value: 1027 }, + { name: 'Arithmetic', value: 3891 }, + { name: 'Average', value: 891 }, + { name: 'BinaryExpression', value: 2893 }, + { name: 'Comparison', value: 5103 }, + { name: 'CompositeExpression', value: 3677 }, + { name: 'Count', value: 781 }, + { name: 'DateUtil', value: 4141 }, + { name: 'Distinct', value: 933 }, + { name: 'Expression', value: 5130 }, + { name: 'ExpressionIterator', value: 3617 }, + { name: 'Fn', value: 3240 }, + { name: 'If', value: 2732 }, + { name: 'IsA', value: 2039 }, + { name: 'Literal', value: 1214 }, + { name: 'Match', value: 3748 }, + { name: 'Maximum', value: 843 }, + { name: 'Minimum', value: 843 }, + { name: 'Not', value: 1554 }, + { name: 'Or', value: 970 }, + { name: 'Query', value: 13896 }, + { name: 'Range', value: 1594 }, + { name: 'StringUtil', value: 4130 }, + { name: 'Sum', value: 791 }, + { name: 'Variable', value: 1124 }, + { name: 'Variance', value: 1876 }, + { name: 'Xor', value: 1101 } + ] + }, + { + name: 'util', + children: [ + { + name: 'palette', + children: [ + { name: 'ColorPalette', value: 6367 }, + { name: 'Palette', value: 1229 }, + { name: 'ShapePalette', value: 2059 }, + { name: 'valuePalette', value: 2291 } + ] + }, + { + name: 'math', + children: [ + { name: 'DenseMatrix', value: 3165 }, + { name: 'IMatrix', value: 2815 }, + { name: 'SparseMatrix', value: 3366 } + ] + }, + { + name: 'heap', + children: [ + { name: 'FibonacciHeap', value: 9354 }, + { name: 'HeapNode', value: 1233 } + ] + }, + { name: 'Arrays', value: 8258 }, + { name: 'Colors', value: 10001 }, + { name: 'Dates', value: 8217 }, + { name: 'Displays', value: 12555 }, + { name: 'Filter', value: 2324 }, + { name: 'Geometry', value: 10993 }, + { name: 'IEvaluable', value: 335 }, + { name: 'IPredicate', value: 383 }, + { name: 'IValueProxy', value: 874 }, + { name: 'Maths', value: 17705 }, + { name: 'Orientation', value: 1486 }, + { name: 'Property', value: 5559 }, + { name: 'Shapes', value: 19118 }, + { name: 'Sort', value: 6887 }, + { name: 'Stats', value: 6557 }, + { name: 'Strings', value: 22026 } + ] + }, + { + name: 'animate', + children: [ + { + name: 'interpolate', + children: [ + { name: 'ArrayInterpolator', value: 1983 }, + { name: 'ColorInterpolator', value: 2047 }, + { name: 'DateInterpolator', value: 1375 }, + { name: 'Interpolator', value: 8746 }, + { name: 'MatrixInterpolator', value: 2202 }, + { name: 'NumberInterpolator', value: 1382 }, + { name: 'ObjectInterpolator', value: 1629 }, + { name: 'PointInterpolator', value: 1675 }, + { name: 'RectangleInterpolator', value: 2042 } + ] + }, + { name: 'Easing', value: 17010 }, + { name: 'FunctionSequence', value: 5842 }, + { name: 'ISchedulable', value: 1041 }, + { name: 'Parallel', value: 5176 }, + { name: 'Pause', value: 449 }, + { name: 'Scheduler', value: 5593 }, + { name: 'Sequence', value: 5534 }, + { name: 'Transition', value: 9201 }, + { name: 'Transitioner', value: 19975 }, + { name: 'TransitionEvent', value: 1116 }, + { name: 'Tween', value: 6006 } + ] + }, + { + name: 'scale', + children: [ + { name: 'IScaleMap', value: 2105 }, + { name: 'LinearScale', value: 1316 }, + { name: 'LogScale', value: 3151 }, + { name: 'OrdinalScale', value: 3770 }, + { name: 'QuantileScale', value: 2435 }, + { name: 'QuantitativeScale', value: 4839 }, + { name: 'RootScale', value: 1756 }, + { name: 'Scale', value: 4268 }, + { name: 'ScaleType', value: 1821 }, + { name: 'TimeScale', value: 5833 } + ] + }, + { + name: 'physics', + children: [ + { name: 'DragForce', value: 1082 }, + { name: 'GravityForce', value: 1336 }, + { name: 'IForce', value: 319 }, + { name: 'NBodyForce', value: 10498 }, + { name: 'Particle', value: 2822 }, + { name: 'Simulation', value: 9983 }, + { name: 'Spring', value: 2213 }, + { name: 'SpringForce', value: 1681 } + ] + }, + { + name: 'data', + children: [ + { + name: 'converters', + children: [ + { name: 'Converters', value: 721 }, + { name: 'DelimitedTextConverter', value: 4294 }, + { name: 'GraphMLConverter', value: 9800 }, + { name: 'IDataConverter', value: 1314 }, + { name: 'JSONConverter', value: 2220 } + ] + }, + { name: 'DataField', value: 1759 }, + { name: 'DataSchema', value: 2165 }, + { name: 'DataSet', value: 586 }, + { name: 'DataSource', value: 3331 }, + { name: 'DataTable', value: 772 }, + { name: 'DataUtil', value: 3322 } + ] + }, + { + name: 'vis', + children: [ + { + name: 'controls', + children: [ + { name: 'AnchorControl', value: 2138 }, + { name: 'ClickControl', value: 3824 }, + { name: 'Control', value: 1353 }, + { name: 'ControlList', value: 4665 }, + { name: 'DragControl', value: 2649 }, + { name: 'ExpandControl', value: 2832 }, + { name: 'HoverControl', value: 4896 }, + { name: 'IControl', value: 763 }, + { name: 'PanZoomControl', value: 5222 }, + { name: 'SelectionControl', value: 7862 }, + { name: 'TooltipControl', value: 8435 } + ] + }, + { + name: 'operator', + children: [ + { + name: 'layout', + children: [ + { name: 'AxisLayout', value: 6725 }, + { name: 'BundledEdgeRouter', value: 3727 }, + { name: 'CircleLayout', value: 9317 }, + { name: 'CirclePackingLayout', value: 12003 }, + { name: 'DendrogramLayout', value: 4853 }, + { name: 'ForceDirectedLayout', value: 8411 }, + { name: 'IcicleTreeLayout', value: 4864 }, + { name: 'IndentedTreeLayout', value: 3174 }, + { name: 'Layout', value: 7881 }, + { name: 'NodeLinkTreeLayout', value: 12870 }, + { name: 'PieLayout', value: 2728 }, + { name: 'RadialTreeLayout', value: 12348 }, + { name: 'RandomLayout', value: 870 }, + { name: 'StackedAreaLayout', value: 9121 }, + { name: 'TreeMapLayout', value: 9191 } + ] + }, + { + name: 'encoder', + children: [ + { name: 'ColorEncoder', value: 3179 }, + { name: 'Encoder', value: 4060 }, + { name: 'PropertyEncoder', value: 4138 }, + { name: 'ShapeEncoder', value: 1690 }, + { name: 'valueEncoder', value: 1830 } + ] + }, + { + name: 'distortion', + children: [ + { name: 'BifocalDistortion', value: 4461 }, + { name: 'Distortion', value: 6314 }, + { name: 'FisheyeDistortion', value: 3444 } + ] + }, + { + name: 'filter', + children: [ + { name: 'FisheyeTreeFilter', value: 5219 }, + { name: 'GraphDistanceFilter', value: 3165 }, + { name: 'VisibilityFilter', value: 3509 } + ] + }, + { + name: 'label', + children: [ + { name: 'Labeler', value: 9956 }, + { name: 'RadialLabeler', value: 3899 }, + { name: 'StackedAreaLabeler', value: 3202 } + ] + }, + { name: 'IOperator', value: 1286 }, + { name: 'Operator', value: 2490 }, + { name: 'OperatorList', value: 5248 }, + { name: 'OperatorSequence', value: 4190 }, + { name: 'OperatorSwitch', value: 2581 }, + { name: 'SortOperator', value: 2023 } + ] + }, + { + name: 'data', + children: [ + { + name: 'render', + children: [ + { name: 'ArrowType', value: 698 }, + { name: 'EdgeRenderer', value: 5569 }, + { name: 'IRenderer', value: 353 }, + { name: 'ShapeRenderer', value: 2247 } + ] + }, + { name: 'Data', value: 20544 }, + { name: 'DataList', value: 19788 }, + { name: 'DataSprite', value: 10349 }, + { name: 'EdgeSprite', value: 3301 }, + { name: 'NodeSprite', value: 19382 }, + { name: 'ScaleBinding', value: 11275 }, + { name: 'Tree', value: 7147 }, + { name: 'TreeBuilder', value: 9930 } + ] + }, + { + name: 'axis', + children: [ + { name: 'Axes', value: 1302 }, + { name: 'Axis', value: 24593 }, + { name: 'AxisGridLine', value: 652 }, + { name: 'AxisLabel', value: 636 }, + { name: 'CartesianAxes', value: 6703 } + ] + }, + { + name: 'events', + children: [ + { name: 'DataEvent', value: 2313 }, + { name: 'SelectionEvent', value: 1880 }, + { name: 'TooltipEvent', value: 1701 }, + { name: 'VisualizationEvent', value: 1117 } + ] + }, + { + name: 'legend', + children: [ + { name: 'Legend', value: 20859 }, + { name: 'LegendItem', value: 4614 }, + { name: 'LegendRange', value: 10530 } + ] + }, + { name: 'Visualization', value: 16540 } + ] + }, + { + name: 'display', + children: [ + { name: 'DirtySprite', value: 8833 }, + { name: 'LineSprite', value: 1732 }, + { name: 'RectSprite', value: 3623 }, + { name: 'TextSprite', value: 10066 } + ] + }, + { + name: 'analytics', + children: [ + { + name: 'graph', + children: [ + { name: 'BetweennessCentrality', value: 3534 }, + { name: 'LinkDistance', value: 5731 }, + { name: 'MaxFlowMinCut', value: 7840 }, + { name: 'ShortestPaths', value: 5914 }, + { name: 'SpanningTree', value: 3416 } + ] + }, + { + name: 'cluster', + children: [ + { name: 'AgglomerativeCluster', value: 3938 }, + { name: 'CommunityStructure', value: 3812 }, + { name: 'HierarchicalCluster', value: 6714 }, + { name: 'MergeEdge', value: 743 } + ] + }, + { + name: 'optimization', + children: [{ name: 'AspectRatioBanker', value: 7074 }] + } + ] + }, + { name: 'flex', children: [{ name: 'FlareVis', value: 4116 }] } +]; + +const chartSpec = { + type: 'treemap', + background: 'transparent', + data: [ + { + id: 'data', + values: getData() + } + ], + width: 290, + height: 209, + categoryField: 'name', + valueField: 'value', + label: { + visible: true, + style: { + fontSize: 12 + } + }, + nodePadding: 1 +}; +export const scene12Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene12-background`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1440, + height: 810 + }, + options: { + graphic: { + stroke: false, + fill: { + gradient: 'linear', + x0: 0.1114, + y0: 0.1854, + x1: 1, + y1: 1, + stops: [ + { offset: 0, color: '#E4F0F2' }, + { offset: 0.84, color: '#BED7DC ' } + ] + } + } + } + }, + { + type: 'RectComponent', + id: `scene12-background-bottom`, + zIndex: 0, + position: { + top: 540, + left: 0, + width: 1440, + height: 270 + }, + options: { + graphic: { + stroke: false, + fill: '#658A92' + } + } + }, + { + type: 'ImageComponent', + id: `scene12-title`, + zIndex: 0, + position: { + top: 190, + left: 168, + width: 282, + height: 124 + }, + options: { + graphic: { + image: scene12Title + } + } + }, + { + type: 'ImageComponent', + id: `scene12-chart-image`, + zIndex: 1, + position: { + top: 120, + left: 100, + width: 1140, + height: 660 + }, + options: { + graphic: { + image: scene12Chart + } + } + }, + { + type: 'ImageComponent', + id: `scene12-bg-decoration`, + zIndex: 0, + position: { + top: 84, + left: 900, + width: 400, + height: 500 + }, + options: { + graphic: { + image: scene12BgDecoration + } + } + }, + { + type: 'ImageComponent', + id: `scene12-text-zh`, + zIndex: 0, + position: { + top: 444, + left: 168, + width: 284, + height: 56 + }, + options: { + graphic: { + image: scene12TextZh + } + } + }, + { + type: 'ImageComponent', + id: `scene12-text-en`, + zIndex: 0, + position: { + top: 584, + left: 168, + width: 284, + height: 66 + }, + options: { + graphic: { + image: scene12TextEn + } + } + }, + { + type: 'TreeMapChart', + id: `scene12-treemap-chart`, + zIndex: 1, + position: { + top: 224, + left: 750, + width: 300, + height: 232 + }, + options: { + spec: chartSpec, + panel: { fill: 'rgb(224, 81, 81)' } + } + } +]; + +export const scene12: ISceneSpec = { + id: 'scene12', + delay: -1500, + actions: [ + { + characterId: 'scene12-background', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene12-background-bottom', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { from: 'bottom' } + } + } + } + ] + }, + { + characterId: 'scene12-title', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene12-chart-image', + characterActions: [ + { + action: 'appear', + startTime: 200, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { from: 'bottom' } + } + } + } + ] + }, + + { + characterId: 'scene12-text-zh', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene12-text-en', + characterActions: [ + { + action: 'appear', + startTime: 1000, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene12-bg-decoration', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene12-treemap-chart', + characterActions: [ + { + action: 'appear', + startTime: 3000, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'centerGrow', + fade: { isBaseOpacity: true } + } + } + }, + { + action: 'disappear', + startTime: 5500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade', + fade: { isBaseOpacity: true } + } + } + } + ] + } + ] +}; + +scene12.actions.forEach(({ characterId, characterActions }) => { + if (characterId.includes('background') || characterId.includes('decoration')) { + // do nothing + } else { + characterActions.push({ + action: 'disappear', + startTime: 7500, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + move: { to: 'left', isVariableSpeed: false } + } + } + }); + } +}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene13.tsx b/packages/vstory/demo/src/demos/VChartSite/scene13.tsx new file mode 100644 index 00000000..1b064e59 --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene13.tsx @@ -0,0 +1,81 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene13Logo from '../../assets/scene13/logo.png'; + +import { easeInOutQuad } from './util'; + +export const scene13Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene13-background`, + zIndex: 2, + position: { + top: 0, + left: 0, + width: 1440, + height: 810 + }, + options: { + graphic: { + stroke: false, + fill: 'white' + } + } + }, + { + type: 'ImageComponent', + id: `scene13-logo`, + zIndex: 2, + position: { + top: 320, + left: 350, + width: 740, + height: 166 + }, + options: { + graphic: { + image: scene13Logo + } + } + } +]; + +export const scene13: ISceneSpec = { + id: 'scene13', + actions: [ + { + characterId: 'scene13-background', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene13-logo', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + fade: { opacity: 1 } + } + } + } + ] + } + ] +}; diff --git a/packages/vstory/demo/src/demos/VChartSite/scene2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene2.tsx index 1a3ec4ce..3e26ad47 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene2.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene2.tsx @@ -8,13 +8,13 @@ export const scene2Characters: ICharacterSpec[] = [ id: `title1`, zIndex: 1, position: { - top: 300, - left: 500, - width: 500, + top: 290, + left: 680, + width: 775, height: 200 }, options: { - graphic: { text: 'A BRIEF HISTORY', fontSize: 55, fontWeight: 'bold' } + graphic: { text: 'A BRIEF HISTORY', fontSize: 75, fontWeight: 'bold' } } }, { @@ -22,13 +22,13 @@ export const scene2Characters: ICharacterSpec[] = [ id: `title2`, zIndex: 1, position: { - top: 380, - left: 500, - width: 400, + top: 390, + left: 680, + width: 600, height: 60 }, options: { - graphic: { text: 'OF CHARTS', fontSize: 55, fontWeight: 'bold' } + graphic: { text: 'OF CHARTS', fontSize: 75, fontWeight: 'bold' } } }, { @@ -36,8 +36,8 @@ export const scene2Characters: ICharacterSpec[] = [ id: `titlesubtitle`, zIndex: 1, position: { - top: 450, - left: 600, + top: 470, + left: 770, width: 400, height: 80 }, diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx index 06668e96..040b526e 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx @@ -481,7 +481,8 @@ export const scene3: ISceneSpec = { duration: 700, easing: easeInOutQuad, move: { - from: 'right' + from: 'right', + isVariableSpeed: false } } } @@ -493,11 +494,11 @@ export const scene3: ISceneSpec = { characterActions: [ { startTime: 1, - duration: 3000, + duration: 700, action: 'appear', payload: { animation: { - duration: 3000, + duration: 700, easing: easeInOutQuad, move: { from: 'right', @@ -513,11 +514,11 @@ export const scene3: ISceneSpec = { characterActions: [ { startTime: 1, - duration: 3000, + duration: 700, action: 'appear', payload: { animation: { - duration: 3000, + duration: 700, easing: easeInOutQuad, move: { from: 'right', @@ -533,11 +534,11 @@ export const scene3: ISceneSpec = { characterActions: [ { startTime: 1, - duration: 3000, + duration: 700, action: 'appear', payload: { animation: { - duration: 3000, + duration: 700, easing: easeInOutQuad, move: { from: 'right', @@ -553,11 +554,11 @@ export const scene3: ISceneSpec = { characterActions: [ { startTime: 1, - duration: 3000, + duration: 700, action: 'appear', payload: { animation: { - duration: 3000, + duration: 700, easing: easeInOutQuad, move: { from: 'right', @@ -573,11 +574,11 @@ export const scene3: ISceneSpec = { characterActions: [ { startTime: 1, - duration: 3000, + duration: 700, action: 'appear', payload: { animation: { - duration: 3000, + duration: 700, easing: easeInOutQuad, move: { from: 'right', @@ -974,9 +975,6 @@ export const scene3: ISceneSpec = { animation: { easing: 'cubicInOut', duration: 1000, - move: { - to: 'right' - }, fade: { opacity: 0.1, isBaseOpacity: true diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx index 52f467ac..f8807baa 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx @@ -351,7 +351,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-title-decoration', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -372,7 +371,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-title', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -393,7 +391,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-subtitle', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -413,7 +410,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-line-left', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -434,7 +430,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-line-left-decoration', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -454,7 +449,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-chart-image', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -467,7 +461,6 @@ export const scene4: ISceneSpec = { } }, { - // TODO: startOffset startTime: 1300, duration: 700, action: 'style', @@ -483,7 +476,6 @@ export const scene4: ISceneSpec = { } }, { - // TODO: startOffset startTime: 2500, duration: 700, action: 'disappear', @@ -498,7 +490,6 @@ export const scene4: ISceneSpec = { } }, { - // TODO: startOffset startTime: 5000, duration: 500, action: 'appear', @@ -515,7 +506,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-text-zh-image', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -530,7 +520,6 @@ export const scene4: ISceneSpec = { } }, { - // TODO: startOffset startTime: 1300, duration: 700, action: 'style', @@ -551,7 +540,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-text-zh-line', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -566,7 +554,6 @@ export const scene4: ISceneSpec = { } }, { - // TODO: startOffset startTime: 1300, duration: 700, action: 'style', @@ -587,7 +574,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-text-en-image', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -607,7 +593,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-green-rect', characterActions: [ { - // TODO: startOffset startTime: 200, duration: 700, action: 'appear', @@ -627,7 +612,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-decoration', characterActions: [ { - // TODO: startOffset startTime: 200, duration: 700, action: 'appear', @@ -647,7 +631,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-grey-rect', characterActions: [ { - // TODO: startOffset startTime: 200, duration: 700, action: 'appear', @@ -667,7 +650,6 @@ export const scene4: ISceneSpec = { characterId: 'scene4-bg-decoration', characterActions: [ { - // TODO: startOffset startTime: 0, duration: 700, action: 'appear', @@ -732,7 +714,9 @@ export const scene4: ISceneSpec = { payload: { animation: { duration: 500, - effect: 'fade' + fade: { + isBaseOpacity: true + } } } } diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx index 26c95cac..fc91f3a8 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx @@ -7,6 +7,7 @@ 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'; +import { Matrix } from '@visactor/vutils'; const chartSpec = { type: 'sequence', @@ -1038,6 +1039,15 @@ const chartSpec = { ] }; +const getTransformPointFunc = (offsetX: number, offsetY: number, scaleX: number, scaleY: number) => { + const m = new Matrix().translate(-offsetX, -offsetY).setScale(1 / scaleX, 1 / scaleY); + return (x: number, y: number) => { + const point = { x: 0, y: 0 }; + m.transformPoint({ x, y }, point); + return point; + }; +}; + export const scene5Characters: ICharacterSpec[] = [ { type: 'RectComponent', @@ -1196,7 +1206,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-background-top', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -1216,7 +1225,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-background-decoration', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -1236,7 +1244,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-background-bottom', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -1256,7 +1263,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-title-image', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 700, action: 'appear', @@ -1276,7 +1282,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-zh-text', characterActions: [ { - // TODO: startOffset startTime: 200, duration: 700, action: 'appear', @@ -1296,7 +1301,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-chart-image', characterActions: [ { - // TODO: startOffset startTime: 400, duration: 700, action: 'appear', @@ -1313,50 +1317,54 @@ export const scene5: ISceneSpec = { ] }, { - characterId: 'scene5-chart', + characterId: 'scene5-atom', characterActions: [ { - // TODO: startOffset - startTime: 2000, + startTime: 1, duration: 700, action: 'appear', payload: { animation: { easing: easeInOutQuad, duration: 700, - effect: 'fade' + move: { + from: 'bottom' + } } } - }, + } + ] + }, + { + characterId: 'scene5-chart', + characterActions: [ { - // TODO: startOffset - startTime: 4000, + startTime: 2000, duration: 700, - action: 'disappear', + action: 'appear', payload: { animation: { easing: easeInOutQuad, duration: 700, - effect: 'fade' + effect: 'fade', + fade: { + isBaseOpacity: true + } } } - } - ] - }, - { - characterId: 'scene5-atom', - characterActions: [ + }, { - // TODO: startOffset - startTime: 1, + startTime: 4000, duration: 700, - action: 'appear', + action: 'disappear', payload: { animation: { easing: easeInOutQuad, duration: 700, - move: { - from: 'bottom' + effect: 'fade', + fade: { + opacity: 0, + isBaseOpacity: true } } } @@ -1367,7 +1375,6 @@ export const scene5: ISceneSpec = { characterId: 'scene5-en-text', characterActions: [ { - // TODO: startOffset startTime: 300, duration: 700, action: 'appear', @@ -1385,3 +1392,56 @@ export const scene5: ISceneSpec = { } ] }; + +// disappear +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); + + 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, + fade: { + opacity: 0 + } + } + } + }); + }); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx index 5154a284..d74b5ae6 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx @@ -1359,7 +1359,6 @@ const scene6_1 = [ characterId: 'scene6-img1', characterActions: [ { - // TODO: startOffset startTime: 1, duration: 1200, action: 'appear', @@ -1400,7 +1399,8 @@ const scene6_1 = [ easing: easeInOutQuad, duration: 500, fade: { - opacity: 1 + opacity: 1, + isBaseOpacity: true }, scale: { ratio: 1 @@ -1430,11 +1430,9 @@ const scene6_1 = [ duration: 1200, effect: 'fade', fade: { - opacity: 0 + opacity: 0, + isBaseOpacity: true } - // scale: { - // ratio: 0 - // } } } } @@ -1509,43 +1507,41 @@ const scene6_2 = [ ] }, // 图表[10000, 14000] - // TODO: 此图表会导致后续全部报错, 异常, 待处理 - // { - // characterId: 'scene6-range-chart', - // characterActions: [ - // { - // startTime: 10000, - // duration: 1000, - // action: 'appear', - // payload: { - // animation: { - // easing: 'cubicInOut', - // duration: 1000, - // fade: { - // opacity: 1, - // isBaseOpacity: true - // } - // } - // } - // }, - // { - // startTime: 13000, - // duration: 1000, - // action: 'disappear', - // payload: { - // animation: { - // easing: 'cubicInOut', - // duration: 1000, - // fade: { - // opacity: 0, - // isBaseOpacity: true - // } - // } - // } - // } - // ] - // }, - + { + characterId: 'scene6-range-chart', + characterActions: [ + { + startTime: 10000, + duration: 1000, + action: 'appear', + payload: { + animation: { + easing: 'cubicInOut', + duration: 1000, + fade: { + opacity: 1, + isBaseOpacity: true + } + } + } + }, + { + startTime: 13000, + duration: 1000, + action: 'disappear', + payload: { + animation: { + easing: 'cubicInOut', + duration: 1000, + fade: { + opacity: 0, + isBaseOpacity: true + } + } + } + } + ] + }, // 右图[8500 + 1000, 14000 + 1000] { characterId: 'scene6-img4', @@ -1586,7 +1582,6 @@ const scene6_2 = [ characterId: 'scene6-bg-bottom', characterActions: [ { - // TODO: startOffset startTime: 8200, duration: 300, action: 'appear', @@ -1622,7 +1617,6 @@ const scene6_2 = [ characterId: 'scene6-bg-top', characterActions: [ { - // TODO: startOffset startTime: scene62Start, duration: 1000, action: 'appear', @@ -1797,7 +1791,7 @@ export const scene6Characters: ICharacterSpec[] = [ { type: 'BarChart', id: `scene6-chart`, - zIndex: 0, + zIndex: 1, position: { top: 232, left: 728, @@ -1815,7 +1809,7 @@ export const scene6Characters: ICharacterSpec[] = [ { type: 'CharacterChart', id: 'scene6-range-chart', - zIndex: 0, + zIndex: 2, position: { top: 280, left: 108, @@ -1833,20 +1827,20 @@ export const scene6Characters: ICharacterSpec[] = [ export const scene6: ISceneSpec = { id: 'scene6', + delay: -500, actions: [ // 背景1 [1, 8500 + 1000] { characterId: 'scene6-bg1', characterActions: [ { - // TODO: startOffset startTime: 1, - duration: 0, + duration: 1, action: 'appear', payload: { animation: { easing: easeInOutQuad, - duration: 0, + duration: 1, scale: { ratio: 1 } @@ -1854,7 +1848,6 @@ export const scene6: ISceneSpec = { } }, { - // TODO: startOffset startTime: 8000, duration: 500, action: 'style', @@ -1887,7 +1880,6 @@ export const scene6: ISceneSpec = { characterId: 'scene6-bg2', characterActions: [ { - // TODO: startOffset startTime: 8000, duration: 0, action: 'appear', @@ -1914,10 +1906,9 @@ export const scene6: ISceneSpec = { } ] }, - // 6-1 ...scene6_1, - // 6-2 + // // 6-2 ...scene6_2 ] }; diff --git a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx index c0434316..064dab63 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene8.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene8.tsx @@ -259,7 +259,7 @@ export const scene8Characters: ICharacterSpec[] = [ export const scene8: ISceneSpec = { id: 'scene8', - delay: 0, + delay: -500, actions: [ { characterId: 'scene8-background', @@ -432,10 +432,10 @@ export const scene8: ISceneSpec = { ] }; -scene8.actions.forEach(({ characterActions }) => { +scene8.actions.forEach(({ characterId, characterActions }) => { characterActions.push({ action: 'disappear', - startTime: 7000, + startTime: characterId === 'scene8-background' ? 7500 : 7000, duration: 500, payload: { animation: { diff --git a/packages/vstory/demo/src/demos/VChartSite/scene9.tsx b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx new file mode 100644 index 00000000..ea9d9742 --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx @@ -0,0 +1,486 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene9Person from '../../assets/scene9/person.png'; +import scene9BgDecoration from '../../assets/scene9/bg-decoration.png'; +import scene9TextEn from '../../assets/scene9/text-en.png'; +import scene9TextZh from '../../assets/scene9/text-zh.png'; +import scene9Title from '../../assets/scene9/title.png'; +import scene9Chart from '../../assets/scene9/chart.png'; + +import { easeInOutQuad } from './util'; + +const monthData = { + Jan: [ + { type: 'rail', value: 31.8, month: 'Jan' }, + { type: 'highway', value: 39.2, month: 'Jan' }, + { type: 'civil aviation', value: 24.1, month: 'Jan' } + ], + Feb: [ + { type: 'rail', value: 46.4, month: 'Feb' }, + { type: 'highway', value: 38, month: 'Feb' }, + { type: 'civil aviation', value: 22.3, month: 'Feb' } + ], + Mar: [ + { type: 'rail', value: 30.3, month: 'Mar' }, + { type: 'highway', value: 30.9, month: 'Mar' }, + { type: 'civil aviation', value: 23.4, month: 'Mar' } + ], + Apr: [ + { type: 'rail', value: 60.8, month: 'Apr' }, + { type: 'highway', value: 26.8, month: 'Apr' }, + { type: 'civil aviation', value: 24.5, month: 'Apr' } + ], + May: [ + { type: 'rail', value: 31.7, month: 'May' }, + { type: 'highway', value: 26.4, month: 'May' }, + { type: 'civil aviation', value: 27, month: 'May' } + ], + Jun: [ + { type: 'rail', value: 38.7, month: 'Jun' }, + { type: 'highway', value: 36.7, month: 'Jun' }, + { type: 'civil aviation', value: 33.4, month: 'Jun' } + ], + Jul: [ + { type: 'rail', value: 25.3, month: 'Jul' }, + { type: 'highway', value: 34.7, month: 'Jul' }, + { type: 'civil aviation', value: 28.2, month: 'Jul' } + ], + Aug: [ + { type: 'rail', value: 45.3, month: 'Aug' }, + { type: 'highway', value: 25.3, month: 'Aug' }, + { type: 'civil aviation', value: 30.8, month: 'Aug' } + ], + Sep: [ + { type: 'rail', value: 26.8, month: 'Sep' }, + { type: 'highway', value: 29.4, month: 'Sep' }, + { type: 'civil aviation', value: 20.9, month: 'Sep' } + ], + Oct: [ + { type: 'rail', value: 39.8, month: 'Oct' }, + { type: 'highway', value: 38.5, month: 'Oct' }, + { type: 'civil aviation', value: 39, month: 'Oct' } + ], + Nov: [ + { type: 'rail', value: 38.3, month: 'Nov' }, + { type: 'highway', value: 23.8, month: 'Nov' }, + { type: 'civil aviation', value: 29.4, month: 'Nov' } + ], + Dec: [ + { type: 'rail', value: 62.8, month: 'Dec' }, + { type: 'highway', value: 35.8, month: 'Dec' }, + { type: 'civil aviation', value: 35.2, month: 'Dec' } + ] +}; + +const month = Object.keys(monthData); + +const chartSpec = { + type: 'rose', + data: [ + { + id: '1856Rose', + values: [], + fields: { + month: { + lockStatisticsByDomain: true, + domain: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] + } + } + } + ], + color: ['#595959', '#94786A', '#709394'], + padding: 5, + radius: 0.7, + innerRadius: 0, + categoryField: 'month', + valueField: 'value', + seriesField: 'type', + stack: true, + rose: { + style: { + stroke: 'white', + lineWidth: 1 + } + }, + animationAppear: { + rose: { + duration: 200, + easing: 'linear' + } + }, + animationEnter: { + rose: { + type: 'growRadiusIn', + options: { overall: true }, + duration: 200, + easing: 'bounceOut' + } + }, + legends: { + visible: false, + orient: 'top', + interactive: false + }, + axes: [ + { + orient: 'radius', + visible: true, + tick: { tickCount: 3 }, + grid: { visible: true, style: { lineDash: [0] } }, + max: 150 + }, + { + orient: 'angle', + visible: true, + domainLine: { visible: true, smooth: false }, + grid: { visible: true, smooth: false }, + label: { + visible: true, + style: { + fill: '#000' + } + } + } + ] +}; + +export const scene9Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene9-background`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1440, + height: 810 + }, + options: { + graphic: { + stroke: false, + fill: '#CFC9BE' + } + } + }, + { + type: 'ImageComponent', + id: `scene9-bg-decoration`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1240, + height: 496 + }, + options: { + graphic: { + image: scene9BgDecoration + } + } + }, + { + type: 'ImageComponent', + id: `scene9-person`, + zIndex: 1, + position: { + top: 218, + left: 864, + width: 396, + height: 592 + }, + options: { + graphic: { + image: scene9Person + } + } + }, + { + type: 'ImageComponent', + id: `scene9-chart-image`, + zIndex: 0, + position: { + top: 196, + left: 454, + width: 800, + height: 612 + }, + options: { + graphic: { + image: scene9Chart, + fillOpacity: 0.9 + } + } + }, + { + type: 'ImageComponent', + id: `scene9-title`, + zIndex: 0, + position: { + top: 140, + left: 160, + width: 285, + height: 105 + }, + options: { + graphic: { + image: scene9Title + } + } + }, + { + type: 'ImageComponent', + id: `scene9-text-zh`, + zIndex: 0, + position: { + top: 500, + left: 165, + width: 270, + height: 86 + }, + options: { + graphic: { + image: scene9TextZh + } + } + }, + { + type: 'ImageComponent', + id: `scene9-text-en`, + zIndex: 0, + position: { + top: 610, + left: 165, + width: 260, + height: 120 + }, + options: { + graphic: { + image: scene9TextEn + } + } + }, + { + type: 'RoseChart', + id: `scene9-rose-chart`, + zIndex: 2, + position: { + top: 376, + left: 470, + width: 240, + height: 240 + }, + options: { + spec: chartSpec, + panel: { + fill: '#C7B9AF' + } + } + } +]; + +export const scene9: ISceneSpec = { + id: 'scene9', + delay: -500, + actions: [ + { + characterId: 'scene9-background', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-bg-decoration', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-person', + characterActions: [ + { + action: 'appear', + startTime: 1, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + from: 'right' + } + } + } + } + ] + }, + { + characterId: 'scene9-title', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 300, + payload: { + animation: { + duration: 300, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-text-zh', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 300, + payload: { + animation: { + duration: 300, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-text-en', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 300, + payload: { + animation: { + duration: 300, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-chart-image', + characterActions: [ + { + action: 'appear', + startTime: 500, + duration: 300, + payload: { + animation: { + duration: 300, + easing: easeInOutQuad, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene9-rose-chart', + characterActions: [ + { + action: 'appear', + startTime: 2000, + duration: 200, + payload: { + animation: { + duration: 200, + easing: 'linear', + effect: 'fade', + fade: { + isBaseOpacity: true + } + } + } + }, + ...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, + duration: 1000, + payload: { + animation: { + duration: 1000, + easing: easeInOutQuad, + effect: 'fade', + fade: { + isBaseOpacity: true + } + } + } + } + ] + } + ] +}; + +scene9.actions.forEach(({ characterId, characterActions }) => { + if (characterId === 'scene9-person') { + characterActions.push({ + action: 'disappear', + startTime: 7500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + move: { + to: 'left' + } + } + } + }); + } else { + characterActions.push({ + action: 'disappear', + startTime: 7500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: easeInOutQuad, + effect: 'fade' + } + } + }); + } +}); diff --git a/packages/vstory/src/dsl/story-processor/graphic/disappear.ts b/packages/vstory/src/dsl/story-processor/graphic/disappear.ts index 2878050b..9e6aeaf0 100644 --- a/packages/vstory/src/dsl/story-processor/graphic/disappear.ts +++ b/packages/vstory/src/dsl/story-processor/graphic/disappear.ts @@ -12,7 +12,6 @@ export const graphicDisappearProcessor = async ( const { effect } = animation ?? {}; const effects = effect && disappearEffectMap[effect] ? [effect] : Object.keys(disappearEffectMap); - effects.forEach(effect => { if (animation.effect === effect || animation[effect]) { // 获取执行方法 diff --git a/packages/vstory/src/dsl/story-processor/graphic/effect/disappear.ts b/packages/vstory/src/dsl/story-processor/graphic/effect/disappear.ts index 738ed08f..d34d48be 100644 --- a/packages/vstory/src/dsl/story-processor/graphic/effect/disappear.ts +++ b/packages/vstory/src/dsl/story-processor/graphic/effect/disappear.ts @@ -74,12 +74,24 @@ export function scaleOut(graphic: IGraphic, params: IScaleOutParams) { if (!canDoGraphicAnimation(graphic, params)) { return false; } + debugger; const { scale = {} } = params; const ratio = scale.ratio ?? params.ratio ?? 0; + const scaleCenter = scale.scaleCenter ?? params.scaleCenter; const duration = scale.duration ?? params.duration; const easing = scale.easing ?? params.easing; - - graphic.animate().to({ scaleX: ratio, scaleY: ratio }, duration, easing as EasingType); + const originScaleCenter = graphic.attribute.scaleCenter; + if (scaleCenter) { + graphic.setAttributes({ scaleCenter }); + } + graphic + .animate() + .to({ scaleX: ratio, scaleY: ratio }, duration, easing as EasingType) + .onEnd(() => { + if (originScaleCenter) { + graphic.setAttributes({ scaleCenter: originScaleCenter }); + } + }); return true; } @@ -155,7 +167,7 @@ export function commonDisappearEffect( ) { let doAnimation = true; switch (effect) { - case 'shrink': + case 'scale': scaleOut(graphic, params); break; case 'fade': diff --git a/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts b/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts index e10e36d0..2d1bf99d 100644 --- a/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts +++ b/packages/vstory/src/dsl/story-processor/processorMap/processorMap.ts @@ -32,6 +32,7 @@ import { wordCloudProcessorMap } from './wordCloud'; import { sunburstProcessorMap } from './sunburst'; import { treeMapProcessorMap } from './treeMap'; import { commonProcessorMap } from './common'; +import { characterProcessorMap } from '../vchart/charts/character'; /** * 通用的编辑processor */ @@ -60,6 +61,7 @@ export const componentProcessor = { // 图表processor export const processorChartMap = { [StoryChartType.CHARACTER_CHART]: commonProcessorMap, + // [StoryChartType.CHARACTER_CHART]: characterProcessorMap, [StoryChartType.BAR]: { // 大多数都是通用的, 可以复用. ...editProcessor, diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts index 30aa7cf9..4578d717 100644 --- a/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts +++ b/packages/vstory/src/dsl/story-processor/vchart/charts/bar/barDisappear.ts @@ -42,7 +42,7 @@ export const barDisappearProcessor = async ( axesDisappearProcessor(chartInstance, spec, { action: 'disappear', payload: undefined }); // 隐藏: 根节点容器 - // chart.setAttributes({ - // visible: false - // }); + chart.setAttributes({ + visible: false + }); }; diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterAppear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterAppear.ts new file mode 100644 index 00000000..fa670d97 --- /dev/null +++ b/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterAppear.ts @@ -0,0 +1,37 @@ +import type { VChart, ISpec } from '@visactor/vchart'; +import type { IChartAppearAction } from '../../../../types/chart/appear'; +import type { ICharacterVisactor } from '../../../../../story/character/visactor/interface'; +import { graphicAppearProcessor } from '../../../graphic/appear'; +import { appearEffectMap } from '../../../graphic/effect/appear'; + +export const characterAppearProcessor = async ( + chartInstance: ICharacterVisactor, + spec: ISpec, + action: IChartAppearAction +) => { + const chart = chartInstance.getGraphicParent(); + const vchart = chart?._vchart; + const instance: VChart = vchart ? vchart : chartInstance; + if (!instance) { + return; + } + + const { animation } = action.payload ?? {}; + const { effect } = animation ?? {}; + + const effects = effect && appearEffectMap[effect] ? [effect] : Object.keys(appearEffectMap); + + effects.forEach(effect => { + instance + .getChart() + .getAllMarks() + .forEach(mark => { + const product = mark.getProduct(); + if (product) { + const graphic = product.getGroupGraphicItem(); + const appearEffect = appearEffectMap[effect]; + appearEffect(graphic, animation); + } + }); + }); +}; diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterDisappear.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterDisappear.ts new file mode 100644 index 00000000..6108d863 --- /dev/null +++ b/packages/vstory/src/dsl/story-processor/vchart/charts/character/characterDisappear.ts @@ -0,0 +1,26 @@ +import VChart, { ISpec } from '@visactor/vchart'; +import { IChartAppearAction } from '../../../../types/chart/appear'; +import { ICharacterVisactor } from '../../../../../story/character/visactor/interface'; +import { graphicDisappearProcessor } from '../../../graphic/disappear'; + +export const characterDisappearProcessor = async ( + chartInstance: ICharacterVisactor, + spec: ISpec, + action: IChartAppearAction +) => { + const chart = chartInstance.getGraphicParent(); + const vchart = chart?._vchart; + const instance: VChart = vchart ? vchart : chartInstance; + + if (!instance) { + return; + } + // Group Disappear + // @ts-ignore + graphicDisappearProcessor(chartInstance, spec, action); + + // 隐藏group + chart.setAttributes({ + visible: false + }); +}; diff --git a/packages/vstory/src/dsl/story-processor/vchart/charts/character/index.ts b/packages/vstory/src/dsl/story-processor/vchart/charts/character/index.ts new file mode 100644 index 00000000..622b939a --- /dev/null +++ b/packages/vstory/src/dsl/story-processor/vchart/charts/character/index.ts @@ -0,0 +1,10 @@ +import { characterAppearProcessor } from './characterAppear'; +import { characterDisappearProcessor } from './characterDisappear'; + +export { characterDisappearProcessor } from './characterDisappear'; +export { characterAppearProcessor } from './characterAppear'; + +export const characterProcessorMap = { + appear: characterAppearProcessor, + disappear: characterDisappearProcessor +}; diff --git a/packages/vstory/src/dsl/story-processor/vchart/marks/rect/appear.ts b/packages/vstory/src/dsl/story-processor/vchart/marks/rect/appear.ts index 6d698767..361649e5 100644 --- a/packages/vstory/src/dsl/story-processor/vchart/marks/rect/appear.ts +++ b/packages/vstory/src/dsl/story-processor/vchart/marks/rect/appear.ts @@ -1,6 +1,5 @@ -import VChart, { ISpec } from '@visactor/vchart'; +import type { VChart, ISpec } from '@visactor/vchart'; import { merge } from '@visactor/vutils'; -import { getAllSeriesMarksByMarkType } from '../../utils'; import { IChartAppearAction } from '../../../../types/chart/appear'; import { transformRectAppear } from './transformRectAppear'; import { ICharacterVisactor } from '../../../../../story/character/visactor/interface'; diff --git a/packages/vstory/src/dsl/story-processor/vchart/update.ts b/packages/vstory/src/dsl/story-processor/vchart/update.ts index d98884f2..7440c82a 100644 --- a/packages/vstory/src/dsl/story-processor/vchart/update.ts +++ b/packages/vstory/src/dsl/story-processor/vchart/update.ts @@ -22,7 +22,7 @@ export const updateProcessor = async ( const { id: dataId, data, values } = payload; if (values) { - await instance.updateDataSync(dataId, values); + instance.updateDataSync(dataId, values); } else { const rowData = cloneDeep(vchart._dataSet.getDataView(dataId).rawData); @@ -36,6 +36,6 @@ export const updateProcessor = async ( } }); - await instance.updateDataSync(dataId, rowData); + instance.updateDataSync(dataId, rowData); } }; diff --git a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-render.ts b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-render.ts index 99a61ba7..7c0175bd 100644 --- a/packages/vstory/src/story/character/chart/graphic/vchart-graphic-render.ts +++ b/packages/vstory/src/story/character/chart/graphic/vchart-graphic-render.ts @@ -39,7 +39,10 @@ export class VChartRender extends DefaultCanvasRectRender implements IGraphicRen themeAttribute: IThemeAttribute ) => boolean ) { - const { baseOpacity = 1 } = chart.attribute; + let { baseOpacity = 1 } = chart.attribute; + if (baseOpacity <= 0) { + return; + } context.baseGlobalAlpha *= baseOpacity; super.drawShape(chart, context, x, y, drawContext, params, fillCb, strokeCb); context.baseGlobalAlpha /= baseOpacity; diff --git a/packages/vstory/src/story/interface/player.ts b/packages/vstory/src/story/interface/player.ts index 5a68dac6..af03d3c6 100644 --- a/packages/vstory/src/story/interface/player.ts +++ b/packages/vstory/src/story/interface/player.ts @@ -14,4 +14,5 @@ export interface IPlayer { } ): void; setCurrentAct(id: number | string): void; + getCurrentAct(): number | string; } diff --git a/packages/vstory/src/story/player/index.ts b/packages/vstory/src/story/player/index.ts index e1f9ecae..590c56da 100644 --- a/packages/vstory/src/story/player/index.ts +++ b/packages/vstory/src/story/player/index.ts @@ -96,6 +96,10 @@ export class Player implements IPlayer { } } + getCurrentAct() { + return this._currAct?.id; + } + // 清除当前状态，一般用于回放操作 reset() { this._currAct.characters.forEach(item => { diff --git a/packages/vstory/src/story/story.ts b/packages/vstory/src/story/story.ts index 7e2eec7a..566583fa 100644 --- a/packages/vstory/src/story/story.ts +++ b/packages/vstory/src/story/story.ts @@ -69,12 +69,17 @@ export class Story implements IStory { this._player.addAct(spec, this._characters); } - play(actIndex = 0) { + play(actIndex: string | number = 0) { // player 开始播放 this._player.setCurrentAct(actIndex); this._player.play(); } + pause() { + this._player.pause(); + return this._player.getCurrentAct(); + } + async encodeToVideo(actIndex: number, millsecond: number, fps: number) { this._player.setCurrentAct(actIndex); return this._player.encodeToVideo(millsecond, fps);