From 7413c9c9088848d68eae41bf1df734a67e6918f4 Mon Sep 17 00:00:00 2001 From: xiaoluoHe Date: Mon, 17 Jun 2024 17:23:08 +0800 Subject: [PATCH] feat: add scene delay --- .../demo/src/demos/VChartSite/scene1.tsx | 2 + .../demo/src/demos/VChartSite/scene10.tsx | 4 +- .../demo/src/demos/VChartSite/scene11.tsx | 16 +-- .../demo/src/demos/VChartSite/scene12-2.tsx | 1 + .../demo/src/demos/VChartSite/scene12.tsx | 1 + .../demo/src/demos/VChartSite/scene5.tsx | 123 +++++++++--------- .../demo/src/demos/VChartSite/scene6.tsx | 92 +++++++------ .../demo/src/demos/VChartSite/scene8.tsx | 6 +- .../demo/src/demos/VChartSite/scene9.tsx | 4 +- .../processorMap/processorMap.ts | 2 + .../src/dsl/story-processor/vchart/update.ts | 4 +- 11 files changed, 133 insertions(+), 122 deletions(-) diff --git a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx index 43bf49ab..6a95db40 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene1.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene1.tsx @@ -844,6 +844,8 @@ const chartSpecList = [ valueField: 'value', outerRadius: 1, innerRadius: 0, + gap: 1, + sunburst: { style: { stroke: false, lineWidth: 0 } }, label: { visible: false } diff --git a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx index 6e31868d..5c46bb89 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene10.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene10.tsx @@ -213,14 +213,14 @@ export const scene10Characters: ICharacterSpec[] = [ export const scene10: ISceneSpec = { id: 'scene10', - delay: -1000, // FIXME: + delay: -1000, actions: [ { characterId: 'scene10-background', characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { diff --git a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx index 7f0365e0..daba876d 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene11.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene11.tsx @@ -1,6 +1,5 @@ import type { ICharacterSpec } from '../../../../src/story/character'; import type { ISceneSpec } from '../../../../src/story/interface'; -import scene11Person from '../../assets/scene11/person.png'; import scene11BgDecoration from '../../assets/scene11/bg-decoration.png'; import scene11TextEn from '../../assets/scene11/text-en.png'; import scene11TextZh from '../../assets/scene11/text-zh.png'; @@ -308,13 +307,14 @@ export const scene11Characters: ICharacterSpec[] = [ export const scene11: ISceneSpec = { id: 'scene11', + delay: -1000, actions: [ { characterId: 'scene11-background', characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { @@ -331,7 +331,7 @@ export const scene11: ISceneSpec = { characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { @@ -348,7 +348,7 @@ export const scene11: ISceneSpec = { characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { @@ -367,7 +367,7 @@ export const scene11: ISceneSpec = { characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { @@ -386,7 +386,7 @@ export const scene11: ISceneSpec = { characterActions: [ { action: 'appear', - startTime: 500, + startTime: 1, duration: 500, payload: { animation: { @@ -424,7 +424,7 @@ export const scene11: ISceneSpec = { characterActions: [ { action: 'appear', - startTime: 1500, + startTime: 2000, duration: 1000, payload: { animation: { @@ -438,7 +438,7 @@ export const scene11: ISceneSpec = { }, { action: 'disappear', - startTime: 3500, + startTime: 4500, duration: 1000, payload: { animation: { diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx index 24061947..4db3cc53 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene12-2.tsx @@ -505,6 +505,7 @@ export const scene12_2_Characters: ICharacterSpec[] = [ export const scene12_2: ISceneSpec = { id: 'scene12_2', + delay: -1000, actions: [ { characterId: 'scene12_2-title', diff --git a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx index b124bc9b..7a71d4cb 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene12.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene12.tsx @@ -544,6 +544,7 @@ export const scene12Characters: ICharacterSpec[] = [ export const scene12: ISceneSpec = { id: 'scene12', + delay: -1500, actions: [ { characterId: 'scene12-background', diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx index 2882ae51..fc91f3a8 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx @@ -1336,51 +1336,54 @@ export const scene5: ISceneSpec = { ] }, { - characterId: 'scene5-en-text', + characterId: 'scene5-chart', characterActions: [ { - startTime: 300, + startTime: 2000, duration: 700, action: 'appear', payload: { animation: { easing: easeInOutQuad, duration: 700, - move: { - from: 'bottom' + effect: 'fade', + fade: { + isBaseOpacity: true } } } - } - ] - }, - { - characterId: 'scene5-chart', - characterActions: [ + }, { - startTime: 2000, + startTime: 4000, duration: 700, - action: 'appear', + action: 'disappear', payload: { animation: { easing: easeInOutQuad, duration: 700, + effect: 'fade', fade: { + opacity: 0, isBaseOpacity: true } } } - }, + } + ] + }, + { + characterId: 'scene5-en-text', + characterActions: [ { - startTime: 4000, + startTime: 300, duration: 700, - action: 'disappear', + action: 'appear', payload: { animation: { easing: easeInOutQuad, duration: 700, - fade: { - isBaseOpacity: true + move: { + from: 'bottom' } } } @@ -1391,50 +1394,54 @@ export const scene5: ISceneSpec = { }; // disappear -scene5.actions.forEach(({ characterId, characterActions }) => { - const duration = 700; +scene5.actions + .filter(({ characterId }) => characterId !== 'scene5-chart') + .forEach(({ characterId, characterActions }) => { + const duration = 700; - if (characterId !== 'scene5-background-decoration') { - const scaleX = 4; - const scaleY = 4; - const transformPointFunc = getTransformPointFunc(-450, -180, scaleX, scaleY); + if (characterId !== 'scene5-background-decoration') { + const scaleX = 4; + const scaleY = 4; + const transformPointFunc = getTransformPointFunc(-450, -180, scaleX, scaleY); - const character = scene5Characters.find(c => c.id === characterId); - if (character) { - const { left, top, width, height } = character.position; - const { x, y } = transformPointFunc(left, top); - const newWidth = width * scaleX; - const newHeight = height * scaleY; - characterActions.push({ - startTime: 5400, - duration, - action: 'style', - payload: { - graphic: { - width: newWidth, - height: newHeight, - x, - y - }, - animation: { - easing: 'easeInOutQuad', - duration + const character = scene5Characters.find(c => c.id === characterId); + if (character) { + // @ts-ignore + const { left, top, width, height } = character.position; + const { x, y } = transformPointFunc(left, top); + const newWidth = width * scaleX; + const newHeight = height * scaleY; + characterActions.push({ + startTime: 5400, + duration, + action: 'style', + payload: { + graphic: { + width: newWidth, + height: newHeight, + x, + y + }, + animation: { + easing: easeInOutQuad, + duration + } } - } - }); - } - } - - characterActions.push({ - startTime: 5400, - duration, - action: 'disappear', - payload: { - animation: { - easing: 'easeInOutQuad', - duration, - effect: 'fade' + }); } } + characterActions.push({ + startTime: 5400, + duration, + action: 'disappear', + payload: { + animation: { + easing: easeInOutQuad, + duration, + fade: { + opacity: 0 + } + } + } + }); }); -}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx index 5864478a..d74b5ae6 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene6.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene6.tsx @@ -1399,7 +1399,8 @@ const scene6_1 = [ easing: easeInOutQuad, duration: 500, fade: { - opacity: 1 + opacity: 1, + isBaseOpacity: true }, scale: { ratio: 1 @@ -1429,11 +1430,9 @@ const scene6_1 = [ duration: 1200, effect: 'fade', fade: { - opacity: 0 + opacity: 0, + isBaseOpacity: true } - // scale: { - // ratio: 0 - // } } } } @@ -1508,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', @@ -1794,7 +1791,7 @@ export const scene6Characters: ICharacterSpec[] = [ { type: 'BarChart', id: `scene6-chart`, - zIndex: 0, + zIndex: 1, position: { top: 232, left: 728, @@ -1812,7 +1809,7 @@ export const scene6Characters: ICharacterSpec[] = [ { type: 'CharacterChart', id: 'scene6-range-chart', - zIndex: 0, + zIndex: 2, position: { top: 280, left: 108, @@ -1830,6 +1827,7 @@ export const scene6Characters: ICharacterSpec[] = [ export const scene6: ISceneSpec = { id: 'scene6', + delay: -500, actions: [ // 背景1 [1, 8500 + 1000] { @@ -1907,10 +1905,10 @@ export const scene6: ISceneSpec = { } } ] - } + }, // 6-1 - // ...scene6_1 + ...scene6_1, // // 6-2 - // ...scene6_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 index 68206f71..ea9d9742 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene9.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene9.tsx @@ -7,7 +7,7 @@ import scene9TextZh from '../../assets/scene9/text-zh.png'; import scene9Title from '../../assets/scene9/title.png'; import scene9Chart from '../../assets/scene9/chart.png'; -import { easeInOutElastic, easeInOutQuad } from './util'; +import { easeInOutQuad } from './util'; const monthData = { Jan: [ @@ -280,7 +280,7 @@ export const scene9Characters: ICharacterSpec[] = [ export const scene9: ISceneSpec = { id: 'scene9', - delay: 0, + delay: -500, actions: [ { characterId: 'scene9-background', 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/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); } };