feat: set Animation default processMode to pausable

docs/src/main.ts

@@ -6,7 +6,6 @@ import {
   Image2D,
   Node2D,
   Text2D,
-  TiltShiftTransition,
   Timeline, Video2D,
 } from '../../src'
 
@@ -17,6 +16,7 @@ const engine = new Engine({
   backgroundColor: '#F6F7F9',
   timeline: Timeline.from([0, 5000], true),
 })
+;(window as any).engine = engine
 engine.root.append(editor)
 document.body.append(engine.view!)
 
@@ -118,20 +118,6 @@ async function init(): Promise<void> {
       },
       src: '/example.mp4',
     }),
-    new TiltShiftTransition({
-      delay: 1500,
-      duration: 3000,
-    }),
-    new Image2D({
-      delay: 2000,
-      style: {
-        left: 200,
-        top: 50,
-        width: 200,
-        height: 200,
-      },
-      src: '/example.jpg',
-    }),
   ])
 
   console.warn(editor, editor.drawboard.toJSON())

src/scene/animation/Animation.ts

@@ -103,15 +103,15 @@ export interface NormalizedKeyframe {
 
 export type AnimationEffectMode = 'parent' | 'sibling'
 
-export interface AnimationProperties extends TimelineNodeProperties {
+export interface AnimationProperties extends Omit<TimelineNodeProperties, 'renderMode' | 'processMode'> {
   effectMode: AnimationEffectMode
   loop: boolean
   keyframes: Keyframe[]
 }
 
-@customNode<AnimationProperties>('Animation', {
+@customNode<TimelineNodeProperties>('Animation', {
   renderMode: 'disabled',
-  processMode: 'disabled',
+  processMode: 'pausable',
   duration: 2000,
 })
 export class Animation extends TimelineNode {
@@ -127,23 +127,33 @@ export class Animation extends TimelineNode {
 
   constructor(properties?: Partial<AnimationProperties>, children: Node[] = []) {
     super()
-    this.commitStyles = this.commitStyles.bind(this)
+    this._process = this._process.bind(this)
 
     this
       .setProperties(properties)
       .append(children)
   }
 
   protected override _treeEnter(tree: SceneTree): void {
-    tree.timeline.on('updateCurrentTime', this.commitStyles)
+    tree.timeline.on('updateCurrentTime', this._process)
     this._updateCachedProps()
   }
 
   protected override _treeExit(oldTree: SceneTree): void {
-    oldTree.timeline.on('updateCurrentTime', this.commitStyles)
+    oldTree.timeline.on('updateCurrentTime', this._process)
     this.cancel()
   }
 
+  protected override _onProcess(): void {
+    // disabled
+  }
+
+  protected _process(): void {
+    if (this.canProcess()) {
+      this.commitStyles()
+    }
+  }
+
   protected override _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void {
     super._updateProperty(key, value, oldValue, declaration)
 

src/scene/main/Effect.ts

@@ -163,6 +163,8 @@ export class Effect extends TimelineNode {
   }
 
   override _onProcess(delta = 0): void {
+    if (!this.canProcess())
+      return
     this._renderId = 0
     switch (this._effectMode) {
       case 'before':

src/scene/main/Node.ts

@@ -188,9 +188,9 @@ export class Node extends CoreObject {
       case 'inherit':
         return this._parent?.canProcess() ?? true
       case 'pausable':
-        return this._tree.paused
-      case 'when_paused':
         return !this._tree.paused
+      case 'when_paused':
+        return this._tree.paused
       case 'always':
         return true
       case 'disabled':

src/scene/main/Transition.ts

@@ -3,12 +3,13 @@ import type { Node } from './Node'
 import { customNode } from '../../core'
 import { Effect } from './Effect'
 
-export interface TransitionProperties extends Omit<EffectProperties, 'effectMode'> {
+export interface TransitionProperties extends Omit<EffectProperties, 'effectMode' | 'processMode'> {
   //
 }
 
 @customNode<EffectProperties>('Transition', {
   effectMode: 'transition',
+  processMode: 'pausable',
   duration: 2000,
 })
 export class Transition extends Effect {