Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: component support visibility #31

Merged
merged 1 commit into from
Aug 7, 2024
Merged

feat: component support visibility #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions packages/vstory/demo/src/demos/BaseComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,85 +155,85 @@ export const BaseComponent = () => {
{
id: 'scene0',
actions: [
...new Array(3).fill(0).map((_, i) => {
...new Array(6).fill(0).map((_, i) => {
return {
characterId: 'rect' + i,
characterId: 'rect' + (i % 3),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 3 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
effect: ['fade', 'scale', 'wipe'][i % 3]
}
}
}
]
};
}),
...new Array(3).fill(0).map((_, i) => {
...new Array(6).fill(0).map((_, i) => {
return {
characterId: 'line' + i,
characterId: 'line' + (i % 3),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 3 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
effect: ['fade', 'scale', 'wipe'][i % 3]
}
}
}
]
};
}),
...new Array(3).fill(0).map((_, i) => {
...new Array(6).fill(0).map((_, i) => {
return {
characterId: 'shape' + i,
characterId: 'shape' + (i % 3),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 3 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
effect: ['fade', 'scale', 'wipe'][i % 3]
}
}
}
]
};
}),
...new Array(3).fill(0).map((_, i) => {
...new Array(6).fill(0).map((_, i) => {
return {
characterId: 'image' + i,
characterId: 'image' + (i % 3),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 3 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn'][i]
effect: ['fade', 'scale', 'wipe'][i % 3]
}
}
}
]
};
}),
...new Array(4).fill(0).map((_, i) => {
...new Array(8).fill(0).map((_, i) => {
return {
characterId: 'text' + i,
characterId: 'text' + (i % 4),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 4 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn', 'typewriter'][i]
effect: ['fade', 'scale', 'wipe', 'typewriter'][i % 4]
}
}
}
Expand All @@ -242,15 +242,15 @@ export const BaseComponent = () => {
}),
...new Array(4).fill(0).map((_, i) => {
return {
characterId: 'timeline' + i,
characterId: 'timeline' + (i % 4),
characterActions: [
{
startTime: i * 1700,
action: 'appear',
action: i / 4 >= 1 ? 'disappear' : 'appear',
payload: {
animation: {
duration: 1600,
effect: ['fadeIn', 'scaleIn', 'wipeIn', 'default'][i]
effect: ['fade', 'scale', 'wipe', 'default'][i % 4]
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/vstory/src/player/processor/chart/vchart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class VChartVisibilityActionProcessor extends ActionProcessorItem {
}

run(character: ICharacter, actionSpec: IAction): void {
const vchart = character.graphic._vchart as IVChart;
const vchart = (character.graphic as any)._vchart as IVChart;
// series & mark
const seriesList = vchart.getChart().getAllSeries();
seriesList.forEach(series => {
Expand Down
79 changes: 55 additions & 24 deletions packages/vstory/src/player/processor/component/common-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,33 +17,48 @@ import { canDoGraphicAnimation } from './utils';

function fadeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphic = getCharacterParentGraphic(character);
_fadeIn(graphic, animation as any);
_fade(graphic, animation as any, true);
}
function fadeOut(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphic = getCharacterParentGraphic(character);
_fade(graphic, animation as any, false);
}

function _fadeIn(graphic: IGraphic, params: IFadeInParams): boolean {
function _fade(graphic: IGraphic, params: IFadeInParams, appear: boolean): boolean {
if (!canDoGraphicAnimation(graphic, params)) {
return false;
}
const { fade = {} } = params;
const opacity = fade.opacity ?? params.opacity ?? 1;
const duration = fade.duration ?? params.duration;
const easing = fade.easing ?? params.easing;

// TODO VRender处理opacity为0
let from = 0.001;
let to = opacity;
if (!appear) {
[from, to] = [to, from];
}

graphic.setAttributes({
baseOpacity: 0.001
baseOpacity: from
} as any);

graphic.animate().to({ baseOpacity: opacity }, duration, easing as EasingType);
graphic.animate().to({ baseOpacity: to }, duration, easing as EasingType);

return true;
}

function scaleIn(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphics = getCharacterByEffect(character, effect) as IGraphic[];
graphics.forEach(graphic => _scaleIn(graphic, animation as any));
graphics.forEach(graphic => _scale(graphic, animation as any, true));
}
function scaleOut(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphics = getCharacterByEffect(character, effect) as IGraphic[];
graphics.forEach(graphic => _scale(graphic, animation as any, false));
}

function _scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
function _scale(graphic: IGraphic, params: IScaleInParams, appear: boolean): boolean {
if (!canDoGraphicAnimation(graphic, params)) {
return false;
}
Expand All @@ -52,11 +67,17 @@ function _scaleIn(graphic: IGraphic, params: IScaleInParams): boolean {
const duration = scale.duration ?? params.duration;
const easing = scale.easing ?? params.easing;

let from = 0;
let to = ratio;
if (!appear) {
[from, to] = [to, from];
}

graphic.setAttributes({
scaleX: 0,
scaleY: 0
scaleX: from,
scaleY: from
});
graphic.animate().to({ scaleX: ratio, scaleY: ratio }, duration, easing as EasingType);
graphic.animate().to({ scaleX: to, scaleY: to }, duration, easing as EasingType);

return true;
}
Expand All @@ -70,9 +91,13 @@ const Direction: any = {

function wipeIn(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphic = getCharacterParentGraphic(character);
_wipeIn(graphic, animation as any);
_wipe(graphic, animation as any, true);
}
function wipeOut(character: ICharacter, animation: IFadeInParams, effect: string) {
const graphic = getCharacterParentGraphic(character);
_wipe(graphic, animation as any, false);
}
function _wipeIn(graphic: IGraphic, params: IWipeInParams) {
function _wipe(graphic: IGraphic, params: IWipeInParams, appear: boolean) {
if (!canDoGraphicAnimation(graphic, params)) {
return false;
}
Expand All @@ -82,21 +107,27 @@ function _wipeIn(graphic: IGraphic, params: IWipeInParams) {
const duration = wipe.duration ?? params.duration;
const easing = wipe.easing ?? params.easing;

let fromRatio = 0;
let toRatio = 1;
if (!appear) {
[fromRatio, toRatio] = [toRatio, fromRatio];
}

graphic.setAttributes({
wipeDirection: Direction[from],
wipeRatio: 0
wipeRatio: fromRatio
} as any);
graphic
.animate()
.to({ wipeRatio: 1 }, duration, easing)
.to({ wipeRatio: toRatio }, duration, easing)
.onEnd(() => {
graphic.setAttributes({ wipeRatio: 1 } as any);
graphic.setAttributes({ wipeRatio: toRatio } as any);
});
return true;
}

export class CommonAppearActionProcessor extends ActionProcessorItem {
name: 'appear';
name: 'appearOrDisAppear';

constructor() {
super();
Expand All @@ -116,21 +147,21 @@ export class CommonAppearActionProcessor extends ActionProcessorItem {

run(character: ICharacter, actionSpec: IAction): void {
const { animation } = actionSpec.payload ?? {};
const { effect = 'fadeIn' } = animation ?? ({} as any);
const { effect = 'fade' } = animation ?? ({} as any);

const effectFunc = this.getEffectFunc(effect);
const effectFunc = this.getEffectFunc(effect, actionSpec.action === 'appear');

effectFunc(character, animation as any, effect);
}

getEffectFunc(effect: string) {
getEffectFunc(effect: string, appear: boolean) {
switch (effect) {
case 'scaleIn':
return scaleIn;
case 'wipeIn':
return wipeIn;
case 'fadeIn':
return fadeIn;
case 'scale':
return appear ? scaleIn : scaleOut;
case 'wipe':
return appear ? wipeIn : wipeOut;
case 'fade':
return appear ? fadeIn : fadeOut;
}
return fadeIn;
}
Expand Down
8 changes: 0 additions & 8 deletions packages/vstory/src/player/processor/component/image/image-appear.ts
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions packages/vstory/src/player/processor/component/image/image-visibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { CommonAppearActionProcessor } from '../common-component';

export class ImageVisibilityActionProcessor extends CommonAppearActionProcessor {
name: 'appearOrDisAppear';
constructor() {
super();
}
}
8 changes: 0 additions & 8 deletions packages/vstory/src/player/processor/component/line/line-appear.ts
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions packages/vstory/src/player/processor/component/line/line-visibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { CommonAppearActionProcessor } from '../common-component';

export class LineVisibilityActionProcessor extends CommonAppearActionProcessor {
name: 'appearOrDisAppear';
constructor() {
super();
}
}
8 changes: 0 additions & 8 deletions packages/vstory/src/player/processor/component/rect/rect-appear.ts
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions packages/vstory/src/player/processor/component/rect/rect-visibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { CommonAppearActionProcessor } from '../common-component';

export class RectVisibilityActionProcessor extends CommonAppearActionProcessor {
name: 'appearOrDisAppear';
constructor() {
super();
}
}
8 changes: 0 additions & 8 deletions packages/vstory/src/player/processor/component/shape/shape-appear.ts
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions packages/vstory/src/player/processor/component/shape/shape-visibility.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { CommonAppearActionProcessor } from '../common-component';

export class ShapeVisibilityActionProcessor extends CommonAppearActionProcessor {
name: 'appearOrDisAppear';
constructor() {
super();
}
}
37 changes: 0 additions & 37 deletions packages/vstory/src/player/processor/component/text/text-appear.ts
View file
Open in desktop

This file was deleted.

Loading
Loading