Merge pull request #31 from VisActor/feat/component-visibility

feat: component support visibility

packages/vstory/demo/src/demos/BaseComponent.tsx

@@ -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]
                           }
                         }
                       }
@@ -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]
                           }
                         }
                       }

packages/vstory/src/player/processor/chart/vchart.ts

@@ -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 => {

packages/vstory/src/player/processor/component/common-component.ts

@@ -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;
   }
@@ -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;
 }
@@ -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;
   }
@@ -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();
@@ -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;
   }

packages/vstory/src/player/processor/component/image/image-visibility.ts

@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class ImageVisibilityActionProcessor extends CommonAppearActionProcessor {
+  name: 'appearOrDisAppear';
+  constructor() {
+    super();
+  }
+}

packages/vstory/src/player/processor/component/line/line-visibility.ts

@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class LineVisibilityActionProcessor extends CommonAppearActionProcessor {
+  name: 'appearOrDisAppear';
+  constructor() {
+    super();
+  }
+}

packages/vstory/src/player/processor/component/rect/rect-visibility.ts

@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class RectVisibilityActionProcessor extends CommonAppearActionProcessor {
+  name: 'appearOrDisAppear';
+  constructor() {
+    super();
+  }
+}

packages/vstory/src/player/processor/component/shape/shape-visibility.ts

@@ -0,0 +1,8 @@
+import { CommonAppearActionProcessor } from '../common-component';
+
+export class ShapeVisibilityActionProcessor extends CommonAppearActionProcessor {
+  name: 'appearOrDisAppear';
+  constructor() {
+    super();
+  }
+}