fix: fix issue with loop for player

VisActor · Aug 8, 2024 · 949cc01 · 949cc01
1 parent c76801a
commit 949cc01
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 17 deletions.
diff --git a/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx b/packages/vstory/demo/src/demos/VChartSite/VChartSite.tsx
@@ -30,12 +30,12 @@ export const VChartSiteDemo = () => {
         // ...scene5Characters,
         // ...scene6Characters,
         // ...scene7Characters,
-        ...scene8Characters,
-        ...scene9Characters,
-        ...scene10Characters,
-        ...scene11Characters,
-        ...scene12Characters,
-        ...scene12_2_Characters,
+        // ...scene8Characters
+        // ...scene9Characters
+        // ...scene10Characters,
+        // ...scene11Characters,
+        // ...scene12Characters
+        // ...scene12_2_Characters
         ...scene13Characters
       ],
       acts: [
@@ -49,12 +49,12 @@ export const VChartSiteDemo = () => {
             // scene5,
             // scene6,
             // scene7,
-            scene8,
-            scene9,
-            scene10,
-            scene11,
-            scene12,
-            scene12_2,
+            // scene8
+            // scene9
+            // scene10,
+            // scene11,
+            // scene12
+            // scene12_2
             scene13
           ]
         }

diff --git a/packages/vstory/demo/src/demos/VChartSite/scene13.tsx b/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 }
             }

diff --git a/packages/vstory/src/player/player.ts b/packages/vstory/src/player/player.ts
@@ -12,21 +12,27 @@ 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;
   }
 }
 

diff --git a/packages/vstory/src/player/processor/chart/common/commonAppear.ts b/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 = (

diff --git a/packages/vstory/src/story/character-tree/character-tree.ts b/packages/vstory/src/story/character-tree/character-tree.ts
@@ -34,6 +34,7 @@ export class CharacterTree implements ICharacterTree {
   }
 
   initCharacters(specs: ICharacterSpec[]): void {
+    this.releaseOldCharacters();
     this._characters = {};
     const option = {
       story: this._story,
@@ -50,4 +51,11 @@ export class CharacterTree implements ICharacterTree {
       }
     });
   }
+
+  releaseOldCharacters() {
+    Object.keys(this._characters).forEach(k => {
+      const c = this._characters[k];
+      c.release();
+    });
+  }
 }
diff --git a/packages/vstory/src/story/character/chart/character.ts b/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);
+  }
 }
diff --git a/packages/vstory/src/story/character/component/character.ts b/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 {

diff --git a/packages/vstory/src/story/character/runtime-interface.ts b/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 {