diff --git a/packages/vstory/demo/index.html b/packages/vstory/demo/index.html index 4a33c62e..3e324be4 100644 --- a/packages/vstory/demo/index.html +++ b/packages/vstory/demo/index.html @@ -8,8 +8,7 @@ - -
+
diff --git a/packages/vstory/demo/src/assets/scene5/atom.png b/packages/vstory/demo/src/assets/scene5/atom.png new file mode 100644 index 00000000..4ed80f3e Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/atom.png differ diff --git a/packages/vstory/demo/src/assets/scene5/bg-decoration.png b/packages/vstory/demo/src/assets/scene5/bg-decoration.png new file mode 100644 index 00000000..fed7c540 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/bg-decoration.png differ diff --git a/packages/vstory/demo/src/assets/scene5/chart.png b/packages/vstory/demo/src/assets/scene5/chart.png new file mode 100644 index 00000000..149ce44d Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/chart.png differ diff --git a/packages/vstory/demo/src/assets/scene5/text-en.png b/packages/vstory/demo/src/assets/scene5/text-en.png new file mode 100644 index 00000000..bbee8974 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/text-en.png differ diff --git a/packages/vstory/demo/src/assets/scene5/text-zh.png b/packages/vstory/demo/src/assets/scene5/text-zh.png new file mode 100644 index 00000000..8ec4a422 Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/text-zh.png differ diff --git a/packages/vstory/demo/src/assets/scene5/title-image.png b/packages/vstory/demo/src/assets/scene5/title-image.png new file mode 100644 index 00000000..08f8530e Binary files /dev/null and b/packages/vstory/demo/src/assets/scene5/title-image.png differ diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx index d28a9bdf..bf062b78 100644 --- a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx @@ -5,6 +5,7 @@ import { scene1, scene1Characters } from './scene1'; import { scene2, scene2Characters } from './scene2'; import { scene3, scene3Characters } from './scene3'; import { scene4, scene4Characters } from './scene4'; +import { scene5, scene5Characters } from './scene5'; export const VChartSiteDemo = () => { const id = 'storyBar'; @@ -13,10 +14,11 @@ export const VChartSiteDemo = () => { // 准备一个图表 const tempSpec: IStorySpec = { characters: [ - ...scene1Characters, // - ...scene2Characters, - ...scene3Characters, - ...scene4Characters + // ...scene1Characters, // + // ...scene2Characters, + // ...scene3Characters, + // ...scene4Characters, + ...scene5Characters ], acts: [ { @@ -24,13 +26,14 @@ export const VChartSiteDemo = () => { scenes: [ // scene1, // // scene2, - scene3, - scene4 + // scene3, + // scene4, + scene5 ] } ] }; - console.log(111, tempSpec); + console.log('dsl', tempSpec); const story = new Story(tempSpec, { dom: id }); window.story = story; story.play(); @@ -67,6 +70,6 @@ export const VChartSiteDemo = () => { // story.getPlayer().tickTo(300 * i++); // }, 300); }, []); - - return
; + /** 视频 1920*1080, 等比例缩小 0.75 */ + return
; }; diff --git a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx index 731aaf7d..0b78a2bb 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene3.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene3.tsx @@ -1189,7 +1189,7 @@ export const scene3: ISceneSpec = { characterActions: [ { action: 'disappear', - startTime: 3500, + startTime: 6500, duration: 700, payload: { animation: { diff --git a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx index 1864c681..986972e1 100644 --- a/packages/vstory/demo/src/demos/VChartSite/scene4.tsx +++ b/packages/vstory/demo/src/demos/VChartSite/scene4.tsx @@ -9,6 +9,9 @@ import RectTexture from '../../assets/scene4/matrix.png'; import DecorationImage from '../../assets/scene4/decoration.png'; import BgDecorationImage from '../../assets/scene4/bg-decoration.png'; +const getCurve = (x: number) => { + return 0.0694 * x * x - 9.3056 * x + 321.1111; // 回归方程 +}; export const scene4Characters: ICharacterSpec[] = [ { type: 'ImageComponent', @@ -116,6 +119,93 @@ export const scene4Characters: ICharacterSpec[] = [ } } }, + { + type: 'ScatterChart', + id: 'scatter', + zIndex: 1, + position: { + left: 200, + top: 320, + width: 500, + height: 120 + }, + options: { + panel: { + fill: '#ffffff', + stroke: 'black', + lineWidth: 1 + }, + data: [ + { + id: 'data', + values: [ + { x: 104, y: 10, type: 'A' }, + { x: 98, y: 10, type: 'A' }, + { x: 93, y: 10, type: 'A' }, + { x: 90, y: 10, type: 'A' }, + { x: 76, y: 10, type: 'A' }, + { x: 70, y: 10, type: 'A' }, + { x: 63, y: 10, type: 'A' } + ] + } + ], + seriesSpec: [ + { + matchInfo: { specIndex: 'all' }, + spec: { + background: 'white', + xField: 'x', + yField: 'y', + seriesField: 'type', + point: { + style: { + size: 8, + fill: `#E05F38` + } + }, + axes: [ + { + orient: 'bottom', + bandPadding: 0 + } + ], + animationUpdate: { + easing: 'cubicInOut', + duration: 1000 + } + } + } + ], + componentSpec: [ + { + specKey: 'axes', + matchInfo: { orient: 'bottom', bandPadding: 0, paddingInner: 0, paddingOuter: 0 }, + spec: { + bandPadding: 0, + paddingInner: 0, + paddingOuter: 0, + min: 0, + max: 110, + type: 'linear', + tick: { visible: false }, + label: { visible: false }, + grid: { visible: false }, + domainLine: { visible: true, style: { stroke: 'black', lineWidth: 4 } } + } + }, + { + specKey: 'axes', + matchInfo: { orient: 'left' }, + spec: { + visible: false, + min: 0, + max: 100 + } + } + ], + attribute: {} + } + }, { type: 'LineComponent', id: 'scene4-text-zh-line', @@ -219,6 +309,22 @@ export const scene4Characters: ICharacterSpec[] = [ } } }, + { + type: 'ImageComponent', + id: 'scene4-bg-decoration', + zIndex: 1, + position: { + left: 180, + top: 680, + width: 1200, + height: 140 + }, + options: { + graphic: { + image: BgDecorationImage + } + } + }, { type: 'ImageComponent', id: 'scene4-bg-decoration', @@ -374,6 +480,33 @@ export const scene4: ISceneSpec = { easing: 'easeInOutQuad' } } + }, + { + // TODO: startOffset + startTime: 2500, + duration: 700, + action: 'disappear', + payload: { + graphic: { + width: 500, + height: 120 + }, + animation: { + duration: 700 + } + } + }, + { + // TODO: startOffset + startTime: 5000, + duration: 500, + action: 'appear', + payload: { + animation: { + duration: 500, + effect: 'fade' + } + } } ] }, @@ -546,6 +679,107 @@ export const scene4: ISceneSpec = { } } ] + }, + { + characterId: 'scatter', + characterActions: [ + { + action: 'appear', + startTime: 2500, + duration: 500, + payload: { + animation: { + duration: 500, + easing: 'cubicOut', + fade: { + opacity: 1, + isBaseOpacity: true, + easing: 'linear' + } + } + } + }, + { + action: 'update', + startTime: 3500, + duration: 1000, + payload: { + id: 'data', + data: [ + { x: 104, y: 10, type: 'A' }, + { x: 98, y: 10, type: 'A' }, + { x: 93, y: 10, type: 'A' }, + { x: 90, y: 10, type: 'A' }, + { x: 76, y: 10, type: 'A' }, + { x: 70, y: 10, type: 'A' }, + { x: 63, y: 10, type: 'A' } + ].map(v => { + return { + sourceValue: v, + targetValue: { + ...v, + y: getCurve(v.x) + } + }; + }) + } + }, + { + action: 'disappear', + startTime: 5000, + duration: 500, + payload: { + animation: { + duration: 500, + effect: 'fade' + } + } + } + ] } ] }; + +scene4.actions.forEach(({ characterActions }) => { + characterActions.push({ + action: 'disappear', + startTime: 6000, + duration: 500, + payload: { + animation: { + duration: 500, + effect: 'fade' + } + } + }); +}); + +scene4.actions.push({ + characterId: 'scene3-background', + characterActions: [ + { + action: 'style', + startTime: 6000, + duration: 500, + payload: { + graphic: { + scaleY: 0 + }, + animation: { + duration: 500 + } + } + }, + { + action: 'disappear', + startTime: 6000, + duration: 500, + payload: { + animation: { + duration: 500, + effect: 'fade' + } + } + } + ] +}); diff --git a/packages/vstory/demo/src/demos/VChartSite/scene5.tsx b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx new file mode 100644 index 00000000..93c2afa0 --- /dev/null +++ b/packages/vstory/demo/src/demos/VChartSite/scene5.tsx @@ -0,0 +1,1386 @@ +import type { ICharacterSpec } from '../../../../src/story/character'; +import type { ISceneSpec } from '../../../../src/story/interface'; +import scene5TitleImage from '../../assets/scene5/title-image.png'; +import scene5Decoration from '../../assets/scene5/bg-decoration.png'; +import scene5Atom from '../../assets/scene5/atom.png'; +import scene5ChartImage from '../../assets/scene5/chart.png'; +import scene5EnText from '../../assets/scene5/text-en.png'; +import scene5ZhText from '../../assets/scene5/text-zh.png'; + +const chartSpec = { + type: 'sequence', + scrollBar: { visible: false }, + color: ['#64b5fc', '#ff8f62'], + series: [ + { + type: 'link', + dataId: 'dataLinkSeries', + dotSeriesIndex: 1, + fromField: 'from', + toField: 'to', + tooltip: { + mark: { + title: { + key: 'link 信息', + value: 'link 信息' + }, + content: [ + { + hasShape: true, + shapeType: 'square', + key: 'from', + value: (datum: any) => datum.from + }, + { + hasShape: true, + shapeType: 'square', + key: 'to', + value: (datum: any) => datum.to + } + ] + } + }, + arrow: { + style: { + visible: false + } + }, + link: { + style: { + stroke: '#ccc' + } + } + }, + { + type: 'dot', + dataId: 'dataDotSeries', + xField: 'event_time', + yField: 'player_name', + dotTypeField: 'event_type', + titleField: 'player_name', + highLightSeriesGroup: '', + height: 300, + clipHeight: 800, + title: { + style: { + fill: 'rgba(46, 47, 50)' + } + }, + subTitle: { + style: { + fill: 'rgba(46, 47, 50)', + dy: 7 + } + }, + grid: { + style: { + visible: false + } + }, + symbol: { + style: { + visible: false + } + }, + tooltip: { + mark: { + title: { + key: 'event 信息', + value: 'event 信息' + }, + content: [ + { + hasShape: true, + shapeType: 'square', + key: (datum: any) => datum.player_name + }, + { + hasShape: false, + key: 'event_time_stamp', + value: (datum: any) => datum.event_time + } + ] + } + } + } + ], + axes: [ + { + orient: 'top', + type: 'time', + range: { + min: -2209017943000, + max: -2209015063000 + }, + layers: [ + { + tickStep: 28800, + timeFormat: '%Y%m%d' + }, + { + tickStep: 28800, + timeFormat: '%H:%M' + } + ], + label: { + visible: false + } + } + ], + data: [ + { + id: 'dataDotSeries', + values: [ + { + player_name: 'Deandre Ayton', + type: 'Deandre Ayton', + dots: [ + { + event_time: -2209017943000, + node_name: 'Deandre Ayton_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017476000, + node_name: 'Deandre Ayton_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016998000, + node_name: 'Deandre Ayton_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016057000, + node_name: 'Deandre Ayton_1_end_node', + event_type: 'end' + }, + { + event_time: -2209015551000, + node_name: 'Deandre Ayton_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015127000, + node_name: 'Deandre Ayton_2_end_node', + event_type: 'end' + }, + { + event_time: -2209015116000, + node_name: 'Deandre Ayton_3_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Deandre Ayton_3_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Devin Booker', + type: 'Devin Booker', + dots: [ + { + event_time: -2209017943000, + node_name: 'Devin Booker_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017293000, + node_name: 'Devin Booker_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016892000, + node_name: 'Devin Booker_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015783000, + node_name: 'Devin Booker_1_end_node', + event_type: 'end' + }, + { + event_time: -2209015380000, + node_name: 'Devin Booker_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Devin Booker_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Kyle Lowry', + type: 'Kyle Lowry', + dots: [ + { + event_time: -2209017943000, + node_name: 'Kyle Lowry_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017476000, + node_name: 'Kyle Lowry_0_end_node', + event_type: 'end' + }, + { + event_time: -2209017223000, + node_name: 'Kyle Lowry_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016762000, + node_name: 'Kyle Lowry_1_end_node', + event_type: 'end' + }, + { + event_time: -2209016614000, + node_name: 'Kyle Lowry_2_start_node', + event_type: 'start' + }, + { + event_time: -2209016057000, + node_name: 'Kyle Lowry_2_end_node', + event_type: 'end' + }, + { + event_time: -2209015884000, + node_name: 'Kyle Lowry_3_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Kyle Lowry_3_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Jae Crowder', + type: 'Jae Crowder', + dots: [ + { + event_time: -2209017943000, + node_name: 'Jae Crowder_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017293000, + node_name: 'Jae Crowder_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016998000, + node_name: 'Jae Crowder_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016139000, + node_name: 'Jae Crowder_1_end_node', + event_type: 'end' + }, + { + event_time: -2209015651000, + node_name: 'Jae Crowder_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Jae Crowder_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Aron Baynes', + type: 'Aron Baynes', + dots: [ + { + event_time: -2209017943000, + node_name: 'Aron Baynes_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017476000, + node_name: 'Aron Baynes_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016503000, + node_name: 'Aron Baynes_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016166000, + node_name: 'Aron Baynes_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Pascal Siakam', + type: 'Pascal Siakam', + dots: [ + { + event_time: -2209016892000, + node_name: 'Pascal Siakam_0_start_node', + event_type: 'start' + }, + { + event_time: -2209015788000, + node_name: 'Pascal Siakam_0_end_node', + event_type: 'end' + }, + { + event_time: -2209015528000, + node_name: 'Pascal Siakam_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Pascal Siakam_1_end_node', + event_type: 'end' + }, + { + event_time: -2209017943000, + node_name: 'Pascal Siakam_2_start_node', + event_type: 'start' + }, + { + event_time: -2209017223000, + node_name: 'Pascal Siakam_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Mikal Bridges', + type: 'Mikal Bridges', + dots: [ + { + event_time: -2209017943000, + node_name: 'Mikal Bridges_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017650000, + node_name: 'Mikal Bridges_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016998000, + node_name: 'Mikal Bridges_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016762000, + node_name: 'Mikal Bridges_1_end_node', + event_type: 'end' + }, + { + event_time: -2209016503000, + node_name: 'Mikal Bridges_2_start_node', + event_type: 'start' + }, + { + event_time: -2209016003000, + node_name: 'Mikal Bridges_2_end_node', + event_type: 'end' + }, + { + event_time: -2209015783000, + node_name: 'Mikal Bridges_3_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Mikal Bridges_3_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Chris Paul', + type: 'Chris Paul', + dots: [ + { + event_time: -2209017943000, + node_name: 'Chris Paul_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017476000, + node_name: 'Chris Paul_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016998000, + node_name: 'Chris Paul_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016057000, + node_name: 'Chris Paul_1_end_node', + event_type: 'end' + }, + { + event_time: -2209015551000, + node_name: 'Chris Paul_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Chris Paul_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'OG Anunoby', + type: 'OG Anunoby', + dots: [ + { + event_time: -2209017943000, + node_name: 'OG Anunoby_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017476000, + node_name: 'OG Anunoby_0_end_node', + event_type: 'end' + }, + { + event_time: -2209017223000, + node_name: 'OG Anunoby_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016614000, + node_name: 'OG Anunoby_1_end_node', + event_type: 'end' + }, + { + event_time: -2209016503000, + node_name: 'OG Anunoby_2_start_node', + event_type: 'start' + }, + { + event_time: -2209016021000, + node_name: 'OG Anunoby_2_end_node', + event_type: 'end' + }, + { + event_time: -2209015788000, + node_name: 'OG Anunoby_3_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'OG Anunoby_3_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Fred VanVleet', + type: 'Fred VanVleet', + dots: [ + { + event_time: -2209016892000, + node_name: 'Fred VanVleet_0_start_node', + event_type: 'start' + }, + { + event_time: -2209015884000, + node_name: 'Fred VanVleet_0_end_node', + event_type: 'end' + }, + { + event_time: -2209015651000, + node_name: 'Fred VanVleet_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Fred VanVleet_1_end_node', + event_type: 'end' + }, + { + event_time: -2209017943000, + node_name: 'Fred VanVleet_2_start_node', + event_type: 'start' + }, + { + event_time: -2209017223000, + node_name: 'Fred VanVleet_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Cameron Johnson', + type: 'Cameron Johnson', + dots: [ + { + event_time: -2209017650000, + node_name: 'Cameron Johnson_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016998000, + node_name: 'Cameron Johnson_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016762000, + node_name: 'Cameron Johnson_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016503000, + node_name: 'Cameron Johnson_1_end_node', + event_type: 'end' + }, + { + event_time: -2209016139000, + node_name: 'Cameron Johnson_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015651000, + node_name: 'Cameron Johnson_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Yuta Watanabe', + type: 'Yuta Watanabe', + dots: [ + { + event_time: -2209017476000, + node_name: 'Yuta Watanabe_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016892000, + node_name: 'Yuta Watanabe_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016021000, + node_name: 'Yuta Watanabe_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015651000, + node_name: 'Yuta Watanabe_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Dario Saric', + type: 'Dario Saric', + dots: [ + { + event_time: -2209017476000, + node_name: 'Dario Saric_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016998000, + node_name: 'Dario Saric_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016057000, + node_name: 'Dario Saric_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015551000, + node_name: 'Dario Saric_1_end_node', + event_type: 'end' + }, + { + event_time: -2209015127000, + node_name: 'Dario Saric_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015116000, + node_name: 'Dario Saric_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Chris Boucher', + type: 'Chris Boucher', + dots: [ + { + event_time: -2209017476000, + node_name: 'Chris Boucher_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016998000, + node_name: 'Chris Boucher_0_end_node', + event_type: 'end' + }, + { + event_time: -2209015962000, + node_name: 'Chris Boucher_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015528000, + node_name: 'Chris Boucher_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Norman Powell', + type: 'Norman Powell', + dots: [ + { + event_time: -2209017476000, + node_name: 'Norman Powell_0_start_node', + event_type: 'start' + }, + { + event_time: -2209017119000, + node_name: 'Norman Powell_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016762000, + node_name: 'Norman Powell_1_start_node', + event_type: 'start' + }, + { + event_time: -2209016547000, + node_name: 'Norman Powell_1_end_node', + event_type: 'end' + }, + { + event_time: -2209016057000, + node_name: 'Norman Powell_2_start_node', + event_type: 'start' + }, + { + event_time: -2209015063000, + node_name: 'Norman Powell_2_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Cameron Payne', + type: 'Cameron Payne', + dots: [ + { + event_time: -2209017476000, + node_name: 'Cameron Payne_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016998000, + node_name: 'Cameron Payne_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016057000, + node_name: 'Cameron Payne_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015551000, + node_name: 'Cameron Payne_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Langston Galloway', + type: 'Langston Galloway', + dots: [ + { + event_time: -2209017293000, + node_name: 'Langston Galloway_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016998000, + node_name: 'Langston Galloway_0_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Jevon Carter', + type: 'Jevon Carter', + dots: [ + { + event_time: -2209017293000, + node_name: 'Jevon Carter_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016892000, + node_name: 'Jevon Carter_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016003000, + node_name: 'Jevon Carter_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015380000, + node_name: 'Jevon Carter_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Malachi Flynn', + type: 'Malachi Flynn', + dots: [ + { + event_time: -2209017119000, + node_name: 'Malachi Flynn_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016892000, + node_name: 'Malachi Flynn_0_end_node', + event_type: 'end' + } + ] + }, + { + player_name: 'Alex Len', + type: 'Alex Len', + dots: [ + { + event_time: -2209016998000, + node_name: 'Alex Len_0_start_node', + event_type: 'start' + }, + { + event_time: -2209016503000, + node_name: 'Alex Len_0_end_node', + event_type: 'end' + }, + { + event_time: -2209016166000, + node_name: 'Alex Len_1_start_node', + event_type: 'start' + }, + { + event_time: -2209015962000, + node_name: 'Alex Len_1_end_node', + event_type: 'end' + } + ] + }, + { + player_name: "DeAndre' Bembry", + type: "DeAndre' Bembry", + dots: [ + { + event_time: -2209016547000, + node_name: "DeAndre' Bembry_0_start_node", + event_type: 'start' + }, + { + event_time: -2209015783000, + node_name: "DeAndre' Bembry_0_end_node", + event_type: 'end' + } + ] + } + ] + }, + { + id: 'dataLinkSeries', + values: [ + { + from: 'Deandre Ayton_0_start_node', + to: 'Deandre Ayton_0_end_node' + }, + { + from: 'Deandre Ayton_1_start_node', + to: 'Deandre Ayton_1_end_node' + }, + { + from: 'Deandre Ayton_2_start_node', + to: 'Deandre Ayton_2_end_node' + }, + { + from: 'Deandre Ayton_3_start_node', + to: 'Deandre Ayton_3_end_node' + }, + { + from: 'Devin Booker_0_start_node', + to: 'Devin Booker_0_end_node' + }, + { + from: 'Devin Booker_1_start_node', + to: 'Devin Booker_1_end_node' + }, + { + from: 'Devin Booker_2_start_node', + to: 'Devin Booker_2_end_node' + }, + { + from: 'Kyle Lowry_0_start_node', + to: 'Kyle Lowry_0_end_node' + }, + { + from: 'Kyle Lowry_1_start_node', + to: 'Kyle Lowry_1_end_node' + }, + { + from: 'Kyle Lowry_2_start_node', + to: 'Kyle Lowry_2_end_node' + }, + { + from: 'Kyle Lowry_3_start_node', + to: 'Kyle Lowry_3_end_node' + }, + { + from: 'Jae Crowder_0_start_node', + to: 'Jae Crowder_0_end_node' + }, + { + from: 'Jae Crowder_1_start_node', + to: 'Jae Crowder_1_end_node' + }, + { + from: 'Jae Crowder_2_start_node', + to: 'Jae Crowder_2_end_node' + }, + { + from: 'Aron Baynes_0_start_node', + to: 'Aron Baynes_0_end_node' + }, + { + from: 'Aron Baynes_1_start_node', + to: 'Aron Baynes_1_end_node' + }, + { + from: 'Pascal Siakam_0_start_node', + to: 'Pascal Siakam_0_end_node' + }, + { + from: 'Pascal Siakam_1_start_node', + to: 'Pascal Siakam_1_end_node' + }, + { + from: 'Pascal Siakam_2_start_node', + to: 'Pascal Siakam_2_end_node' + }, + { + from: 'Mikal Bridges_0_start_node', + to: 'Mikal Bridges_0_end_node' + }, + { + from: 'Mikal Bridges_1_start_node', + to: 'Mikal Bridges_1_end_node' + }, + { + from: 'Mikal Bridges_2_start_node', + to: 'Mikal Bridges_2_end_node' + }, + { + from: 'Mikal Bridges_3_start_node', + to: 'Mikal Bridges_3_end_node' + }, + { + from: 'Chris Paul_0_start_node', + to: 'Chris Paul_0_end_node' + }, + { + from: 'Chris Paul_1_start_node', + to: 'Chris Paul_1_end_node' + }, + { + from: 'Chris Paul_2_start_node', + to: 'Chris Paul_2_end_node' + }, + { + from: 'OG Anunoby_0_start_node', + to: 'OG Anunoby_0_end_node' + }, + { + from: 'OG Anunoby_1_start_node', + to: 'OG Anunoby_1_end_node' + }, + { + from: 'OG Anunoby_2_start_node', + to: 'OG Anunoby_2_end_node' + }, + { + from: 'OG Anunoby_3_start_node', + to: 'OG Anunoby_3_end_node' + }, + { + from: 'Fred VanVleet_0_start_node', + to: 'Fred VanVleet_0_end_node' + }, + { + from: 'Fred VanVleet_1_start_node', + to: 'Fred VanVleet_1_end_node' + }, + { + from: 'Fred VanVleet_2_start_node', + to: 'Fred VanVleet_2_end_node' + }, + { + from: 'Cameron Johnson_0_start_node', + to: 'Cameron Johnson_0_end_node' + }, + { + from: 'Cameron Johnson_1_start_node', + to: 'Cameron Johnson_1_end_node' + }, + { + from: 'Cameron Johnson_2_start_node', + to: 'Cameron Johnson_2_end_node' + }, + { + from: 'Yuta Watanabe_0_start_node', + to: 'Yuta Watanabe_0_end_node' + }, + { + from: 'Yuta Watanabe_1_start_node', + to: 'Yuta Watanabe_1_end_node' + }, + { + from: 'Dario Saric_0_start_node', + to: 'Dario Saric_0_end_node' + }, + { + from: 'Dario Saric_1_start_node', + to: 'Dario Saric_1_end_node' + }, + { + from: 'Dario Saric_2_start_node', + to: 'Dario Saric_2_end_node' + }, + { + from: 'Chris Boucher_0_start_node', + to: 'Chris Boucher_0_end_node' + }, + { + from: 'Chris Boucher_1_start_node', + to: 'Chris Boucher_1_end_node' + }, + { + from: 'Norman Powell_0_start_node', + to: 'Norman Powell_0_end_node' + }, + { + from: 'Norman Powell_1_start_node', + to: 'Norman Powell_1_end_node' + }, + { + from: 'Norman Powell_2_start_node', + to: 'Norman Powell_2_end_node' + }, + { + from: 'Cameron Payne_0_start_node', + to: 'Cameron Payne_0_end_node' + }, + { + from: 'Cameron Payne_1_start_node', + to: 'Cameron Payne_1_end_node' + }, + { + from: 'Langston Galloway_0_start_node', + to: 'Langston Galloway_0_end_node' + }, + { + from: 'Jevon Carter_0_start_node', + to: 'Jevon Carter_0_end_node' + }, + { + from: 'Jevon Carter_1_start_node', + to: 'Jevon Carter_1_end_node' + }, + { + from: 'Malachi Flynn_0_start_node', + to: 'Malachi Flynn_0_end_node' + }, + { + from: 'Alex Len_0_start_node', + to: 'Alex Len_0_end_node' + }, + { + from: 'Alex Len_1_start_node', + to: 'Alex Len_1_end_node' + }, + { + from: "DeAndre' Bembry_0_start_node", + to: "DeAndre' Bembry_0_end_node" + } + ] + } + ] +}; + +export const scene5Characters: ICharacterSpec[] = [ + { + type: 'RectComponent', + id: `scene5-background-top`, + zIndex: 0, + position: { + top: 0, + left: 0, + width: 1440, + height: 590 + }, + options: { + graphic: { + stroke: false, + fill: 'rgb(214,216,216)' + } + } + }, + { + type: 'RectComponent', + id: `scene5-background-bottom`, + zIndex: 0, + position: { + top: 590, + left: 0, + width: 1440, + height: 220 + }, + options: { + graphic: { + stroke: false, + fill: 'rgb(242,242,241)' + } + } + }, + { + type: 'ImageComponent', + id: `scene5-title-image`, + zIndex: 1, + position: { + top: 125, + left: 210, + width: 256, + height: 421 + }, + options: { + graphic: { + image: scene5TitleImage + } + } + }, + { + type: 'ImageComponent', + id: `scene5-background-decoration`, + zIndex: 0, + position: { + top: 0, + left: 56, + width: 1080, + height: 607 + }, + options: { + graphic: { + image: scene5Decoration, + scale: 0.6 + } + } + }, + { + type: 'ImageComponent', + id: `scene5-atom`, + zIndex: 0, + position: { + top: 620, + left: 210, + width: 400, + height: 140 + }, + options: { + graphic: { + image: scene5Atom + } + } + }, + { + type: 'ImageComponent', + id: `scene5-zh-text`, + zIndex: 0, + position: { + top: 406, + left: 520, + width: 200, + height: 90 + }, + options: { + graphic: { + image: scene5ZhText + } + } + }, + { + type: 'ImageComponent', + id: `scene5-en-text`, + zIndex: 0, + position: { + top: 640, + left: 700, + width: 440, + height: 100 + }, + options: { + graphic: { + image: scene5EnText + } + } + }, + { + type: 'ImageComponent', + id: `scene5-chart-image`, + zIndex: 0, + position: { + top: 163, + left: 828, + width: 310, + height: 390 + }, + options: { + graphic: { + image: scene5ChartImage + } + } + }, + { + type: 'CharacterChart', + id: `scene5-chart`, + zIndex: 0, + position: { + top: 190, + left: 830, + width: 306, + height: 350 + }, + options: { + spec: chartSpec, + panel: { + fill: 'white' + } + } + } +]; + +export const scene5: ISceneSpec = { + id: 'scene5', + actions: [ + { + characterId: 'scene5-background-top', + characterActions: [ + { + // TODO: startOffset + startTime: 1, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene5-background-decoration', + characterActions: [ + { + // TODO: startOffset + startTime: 1, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene5-background-bottom', + characterActions: [ + { + // TODO: startOffset + startTime: 1, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'bottom' + } + } + } + } + ] + }, + { + characterId: 'scene5-title-image', + characterActions: [ + { + // TODO: startOffset + startTime: 1, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene5-zh-text', + characterActions: [ + { + // TODO: startOffset + startTime: 200, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene5-chart-image', + characterActions: [ + { + // TODO: startOffset + startTime: 400, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'top' + } + } + } + } + ] + }, + { + characterId: 'scene5-chart', + characterActions: [ + { + // TODO: startOffset + startTime: 2000, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + effect: 'fade' + } + } + }, + { + // TODO: startOffset + startTime: 4000, + duration: 700, + action: 'disappear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + effect: 'fade' + } + } + } + ] + }, + { + characterId: 'scene5-atom', + characterActions: [ + { + // TODO: startOffset + startTime: 1, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'bottom' + } + } + } + } + ] + }, + { + characterId: 'scene5-en-text', + characterActions: [ + { + // TODO: startOffset + startTime: 300, + duration: 700, + action: 'appear', + payload: { + animation: { + easing: 'easeInOutQuad', + duration: 700, + move: { + from: 'bottom' + } + } + } + } + ] + } + ] +}; diff --git a/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts b/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts index 0c742cfd..baa2f4a9 100644 --- a/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts +++ b/packages/vstory/src/dsl/story-processor/processorMap/scatter.ts @@ -9,7 +9,7 @@ import { bounceProcessor } from '../vchart/bounce'; export const scatterProcessorMap = { add: addProcessor, addPatch: addProcessor, - updateProcessor, + update: updateProcessor, bounce: bounceProcessor,