Merge pull request #35 from VisActor/feat/play-loop

Feat/play loop

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

@@ -128,7 +128,7 @@ export const BarLineSeries = () => {
                         style: {},
                         animation: {
                           // effect: 'fade',
-                          duration: 10000,
+                          duration: 1000,
                           easing: 'linear'
                         } as any
                       }

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

@@ -30,13 +30,13 @@ export const VChartSiteDemo = () => {
         // ...scene5Characters,
         // ...scene6Characters,
         // ...scene7Characters,
-        // ...scene8Characters,
-        // ...scene9Characters,
+        // ...scene8Characters
+        // ...scene9Characters
         // ...scene10Characters,
         // ...scene11Characters,
-        // ...scene12Characters,
-        ...scene12_2_Characters
-        // ...scene13Characters
+        // ...scene12Characters
+        // ...scene12_2_Characters
+        ...scene13Characters
       ],
       acts: [
         {
@@ -49,13 +49,13 @@ export const VChartSiteDemo = () => {
             // scene5,
             // scene6,
             // scene7,
-            // scene8,
-            // scene9,
+            // scene8
+            // scene9
             // scene10,
             // scene11,
-            // scene12,
-            scene12_2
-            // scene13
+            // scene12
+            // scene12_2
+            scene13
           ]
         }
       ]

packages/vstory/demo/src/demos/VChartSite/scene13.tsx

@@ -48,7 +48,7 @@ export const scene13: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 1,
+          startTime: 0,
           duration: 1000,
           payload: {
             animation: {
@@ -65,11 +65,12 @@ export const scene13: ISceneSpec = {
       characterActions: [
         {
           action: 'appear',
-          startTime: 1,
+          startTime: 0,
           duration: 1000,
           payload: {
             animation: {
-              duration: 1000,
+              duration: 2000,
+              effect: 'scale',
               easing: easeInOutQuad,
               fade: { opacity: 1 }
             }

packages/vstory/src/player/interface/player.ts

@@ -1,11 +1,13 @@
+import type { EventEmitter } from '@visactor/vutils';
 import { ICharacter } from '../../story/character';
 import type { IActSpec } from '../../story/interface/dsl-interface';
 
-export interface IPlayer {
+export interface IPlayer extends EventEmitter {
   tickTo: (t: number) => void;
   play: () => void;
   encodeToVideo: (millsecond: number, fps: number) => Promise<string>;
   pause: () => void;
   release: () => void;
   initActs: (acts: IActSpec[]) => void;
+  reset: () => void;
 }

packages/vstory/src/player/interface/scheduler.ts

@@ -2,7 +2,7 @@ import type { IActSpec } from '../../story/interface';
 import type { IActionItem } from '../scheduler';
 
 export interface IScheduler {
-  initActs: (acts: IActSpec[]) => void;
+  init: (acts: IActSpec[]) => void;
   getActionsInRange: (fromTime: number, toTime: number) => IActionItem[];
   clearState: () => void;
   getTotalTime: () => number;

packages/vstory/src/player/player.ts

@@ -7,29 +7,36 @@ import { ActionProcessor } from './processor/processor';
 import { processorMap } from './processor/processorMap';
 import type { IScheduler } from './interface/scheduler';
 import { Scheduler } from './scheduler';
+import { EventEmitter } from '@visactor/vutils';
 
 export class Ticker {
   cb?: (delta: number) => void;
   rafIdx = 0;
+  running: boolean;
   start(cb: (t: number) => void) {
     this.stop();
     this.cb = cb;
+    this.running = true;
     this._tick(0);
   }
 
   _tick = (lt: number) => {
+    if (!this.running) {
+      return;
+    }
     const ct = Date.now();
-    this.cb && this.cb(lt === 0 ? 0 : ct - lt);
     this.rafIdx = requestAnimationFrame(() => this._tick(ct));
+    this.cb && this.cb(lt === 0 ? 0 : ct - lt);
   };
 
   stop() {
     this.rafIdx && cancelAnimationFrame(this.rafIdx);
     this.rafIdx = 0;
+    this.running = false;
   }
 }
 
-export class Player implements IPlayer {
+export class Player extends EventEmitter implements IPlayer {
   protected _story: IStory;
   protected _ticker: Ticker;
   protected _currTime: number;
@@ -38,6 +45,7 @@ export class Player implements IPlayer {
   protected _scheduler: IScheduler;
 
   constructor(story: IStory, options?: { scaleX?: number; scaleY?: number }) {
+    super();
     this._story = story;
     this._ticker = new Ticker();
     this._currTime = 0;
@@ -51,32 +59,25 @@ export class Player implements IPlayer {
   }
 
   initActs(acts: IActSpec[]) {
-    this._scheduler.initActs(acts);
+    this._scheduler.init(acts);
   }
 
   // 清除当前状态，一般用于回放操作
   reset() {
     this._scheduler.clearState();
     this._story.canvas.getStage().getTimeline().clear();
+    this._currTime = 0;
     return;
   }
 
   tickTo(t: number) {
     // console.log(t);
     const lastTime = this._currTime;
-    const totalTime = this._scheduler.getTotalTime();
-    while (t > totalTime) {
-      t -= totalTime;
-    }
+    // 如果时间倒退，那就重置，从头开始（需要上层场景树也重置）
     if (lastTime > t) {
-      // 先结束这一块内容，设置到totalTime，让动画结束
-      if (lastTime < totalTime) {
-        t = totalTime + 0.01;
-      } else {
-        this.reset();
-        this._currTime = 0;
-        this.tickTo(0);
-      }
+      this.reset();
+      // this._currTime = 0;
+      // this.tickTo(0);
     }
 
     const actions = this._scheduler.getActionsInRange(lastTime, t);
@@ -103,7 +104,17 @@ export class Player implements IPlayer {
     this._currTime = 0;
     this.reset();
     this._ticker.start(t => {
-      this.tickTo(this._currTime + t);
+      let nextT = this._currTime + t;
+      const totalTime = this._scheduler.getTotalTime();
+      // 时间超过总时长之后，停止ticker执行
+      if (nextT >= totalTime) {
+        nextT = totalTime;
+        this.tickTo(nextT);
+        this._ticker.stop();
+        this.emit('onstop');
+      } else {
+        this.tickTo(nextT);
+      }
     });
   }
 

packages/vstory/src/player/processor/chart/common/commonAppear.ts

@@ -8,9 +8,10 @@ export const commonFade = (
 ) => {
   const { duration, easing } = animation;
   const { disappear } = option;
+  const currOpacity = instance.attribute.baseOpacity;
   const opacityMap = disappear ? { from: 1, to: 0 } : { from: 0, to: 1 };
 
-  instance.setAttributes({ baseOpacity: opacityMap.from });
+  instance.setAttributes({ baseOpacity: currOpacity ?? opacityMap.from });
   instance.animate().to({ baseOpacity: opacityMap.to }, duration, easing);
 };
 export const commonGrow = (

packages/vstory/src/player/processor/chart/component/commonAppear.ts

@@ -1,5 +1,6 @@
 import type { IGroup } from '@visactor/vrender-core';
 import type { IChartVisibilityAction } from '../../interface/appear-action';
+import { commonFade } from '../common/commonAppear';
 
 export const commonGrow = (
   instance: IGroup,
@@ -32,18 +33,6 @@ export const commonGrow = (
   }
 };
 
-export const commonFade = (
-  instance: IGroup,
-  animation: IChartVisibilityAction['payload']['animation'],
-  option: { disappear: boolean }
-) => {
-  const { duration, easing } = animation;
-  const { disappear } = option;
-  const opacityMap = disappear ? { from: 1, to: 0 } : { from: 0, to: 1 };
-  instance.setAttributes({ baseOpacity: opacityMap.from });
-  instance.animate().to({ baseOpacity: opacityMap.to }, duration, easing);
-};
-
 export const runAppearOrDisAppear = (
   instance: IGroup,
   animation: IChartVisibilityAction['payload']['animation'],

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

@@ -24,6 +24,6 @@ export const transformMap = {
     axis: runAxisAppear,
     title: runTitleAppear,
     // chart:
-    chart: runAppearOrDisAppear
+    chart: runChartAppear
   }
 };

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

@@ -102,12 +102,17 @@ export class ActionProcessor implements IActionProcessor {
   doAction(name: string, actionName: string, character: ICharacter, actionSpec: IAction): void {
     const processor = this.getProcessor(name, actionName);
     if (processor) {
-      // eslint-disable-next-line no-console
-      logger('info', `Execute action => ${actionName}, character => ${name}`); // TODO: remove log
-      const actionResult = processor.run(character, actionSpec);
-      // eslint-disable-next-line no-console
-      logger('info', `Action Executed:`, actionResult); // TODO: remove log
-      return actionResult;
+      try {
+        // eslint-disable-next-line no-console
+        logger('info', `Execute action => ${actionName}, character => ${name}`); // TODO: remove log
+        const actionResult = processor.run(character, actionSpec);
+        // eslint-disable-next-line no-console
+        logger('info', `Action Executed:`, actionResult); // TODO: remove log
+        return actionResult;
+      } catch (err) {
+        logger('error', `Action Executed Error: ${err}`);
+        return null;
+      }
     }
     // eslint-disable-next-line no-console
     logger('error', `Action not found: character => ${name}, action => ${actionName} `); // TODO: remove log

packages/vstory/src/player/scheduler.ts

@@ -48,6 +48,11 @@ export class Scheduler implements IScheduler {
     this._runnedAct = new Set();
   }
 
+  init(acts: IActSpec[]) {
+    this.clearState();
+    this.initActs(acts);
+  }
+
   clearState(): void {
     this._runnedAct.clear();
   }
@@ -112,7 +117,7 @@ export class Scheduler implements IScheduler {
     return actions;
   }
 
-  initActs(acts: IActSpec[]) {
+  protected initActs(acts: IActSpec[]) {
     // act与act之间是串联的
     let startTime = 0;
     this._actsInfo = acts.map(act => {

packages/vstory/src/story/character-tree/character-tree.ts

@@ -34,6 +34,8 @@ export class CharacterTree implements ICharacterTree {
   }
 
   initCharacters(specs: ICharacterSpec[]): void {
+    this.releaseOldCharacters();
+    this._characters = {};
     const option = {
       story: this._story,
       canvas: this._story.canvas,
@@ -49,4 +51,11 @@ export class CharacterTree implements ICharacterTree {
       }
     });
   }
+
+  releaseOldCharacters() {
+    Object.keys(this._characters).forEach(k => {
+      const c = this._characters[k];
+      c.release();
+    });
+  }
 }

packages/vstory/src/story/character/chart/character.ts

@@ -110,4 +110,8 @@ export class CharacterChart extends CharacterVisactor {
   checkEvent(event: StoryEvent): false | ICharacterPickInfo {
     return false;
   }
+
+  release(): void {
+    this.option.graphicParent.removeChild(this._graphic as any);
+  }
 }

packages/vstory/src/story/character/component/character.ts

@@ -100,6 +100,10 @@ export abstract class CharacterComponent extends CharacterBase {
       graphicType: this.graphicType
     };
   }
+
+  release() {
+    this.option.graphicParent.removeChild(this._group);
+  }
 }
 
 // export abstract class CharacterGraphicComponent extends CharacterBase {

packages/vstory/src/story/character/runtime-interface.ts

@@ -26,6 +26,7 @@ export interface ICharacter {
   updateSpec: (spec: Omit<Partial<ICharacterSpec>, 'id' | 'type'>) => void;
 
   setAttributes: (attr: Record<string, any>) => void;
+  release: () => void;
 }
 
 export interface ICharacterInitOption {