🚀feat: Add ready Props for Framework

packages/ngx-scenejs/README.md

@@ -65,6 +65,7 @@ export class AppComponent {
   [time]="0"
   [css]="false"
   [autoplay]="false"
+  [ready]="true"
   (scenePlay)="onPlay($event)"
   (scenePaused)="onPaused($event)"
   (sceneEnded)="onEnded($event)"
@@ -87,6 +88,7 @@ export class AppComponent {
 |css|boolean|false|Check to play with CSS|
 |autoplay|boolean|false|Check to play automatically|
 |keyframes|object|{}|Specify properties by time.|
+|ready|boolean|true|Check if you are ready to init and play.|
 |...options|||[Check out the options](https://daybrush.github.io/scenejs/release/latest/doc/global.html#AnimatorOptions)|
 |...events|||[Check out Scene's events](https://daybrush.com/scenejs/release/latest/doc/Scene.html#events)<br/> [Check out SceneItem's events](https://daybrush.com/scenejs/release/latest/doc/SceneItem.html#events)|
 

packages/ngx-scenejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-scenejs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "An Angular Component that create JavaScript & CSS timeline-based animation with Scene.js",
   "main": "dist/scene.cjs.js",
   "module": "dist/scene.esm.js",

packages/ngx-scenejs/src/ngx-scenejs/ngx-scene.interface.ts

@@ -15,6 +15,7 @@ export class NgxSceneInterface implements OnDestroy, AfterViewChecked {
   @Input() public autoplay = false;
   @Input() public css = false;
   @Input() public time = -1;
+  @Input() public ready = true;
   @Output() scenePaused: EventEmitter<any> = new EventEmitter<any>();
   @Output() sceneEnded: EventEmitter<any> = new EventEmitter<any>();
   @Output() sceneTimeUpdate: EventEmitter<any> = new EventEmitter<any>();
@@ -23,16 +24,21 @@ export class NgxSceneInterface implements OnDestroy, AfterViewChecked {
   @Output() scenePlay: EventEmitter<any> = new EventEmitter<any>();
 
   protected item: Scene | SceneItem;
+  protected isReady = false;
 
   public init() {
+    if (!this.ready || this.isReady) {
+      return;
+    }
+    this.isReady = true;
     const item = this.item;
     const sceneOptions: Partial<AnimatorState> = {};
 
     if (this.keyframes) {
       this.item.load(this.keyframes);
     }
     OPTIONS.forEach(name => {
-      sceneOptions[name] = this[name];
+      (sceneOptions[name] as any) = this[name];
     });
     (item as any).setOptions(sceneOptions);
     EVENTS.forEach(name => {
@@ -79,6 +85,9 @@ export class NgxSceneInterface implements OnDestroy, AfterViewChecked {
     this.item.off();
   }
   ngAfterViewChecked() {
+    if (this.ready && !this.isReady) {
+      this.init();
+    }
     if (this.time !== -1 && (this.autoplay === false || this.item.getPlayState() === 'paused')) {
       this.setTime(this.time);
     }

packages/preact-scenejs/README.md

@@ -50,6 +50,7 @@ render() {
     time={0}
     css={false}
     autoplay={false}
+    ready={true}
     onPlay={e => { console.log(e); }}
     onPaused={e => { console.log(e); }}
     onAnimate={e => { console.log(e); }}
@@ -72,6 +73,7 @@ render() {
 |css|boolean|false|Check to play with CSS|
 |autoplay|boolean|false|Check to play automatically|
 |keyframes|object|{}|Specify properties by time.|
+|ready|boolean|true|Check if you are ready to init and play.|
 |...options|||[Check out the options](https://daybrush.github.io/scenejs/release/latest/doc/global.html#AnimatorOptions)|
 |...events|||[Check out Scene's events](https://daybrush.com/scenejs/release/latest/doc/Scene.html#events)<br/> [Check out SceneItem's events](https://daybrush.com/scenejs/release/latest/doc/SceneItem.html#events)|
 

packages/preact-scenejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "preact-scenejs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Preact Component that create JavaScript & CSS timeline-based animation with Scene.js",
   "main": "dist/scene.cjs.js",
   "module": "dist/scene.esm.js",

packages/preact-scenejs/src/preact-scenejs/SceneInterface.tsx

@@ -4,86 +4,96 @@ import { IObject } from "@daybrush/utils";
 import { ScenePropTypes } from "./types";
 
 export class SceneInterface<T extends Scene | SceneItem> extends Component<ScenePropTypes, {}> {
-  public static defaultProps: ScenePropTypes = {
-    duration: 0,
-    fillMode: "forwards",
-    direction: "normal",
-    playSpeed: 1,
-    iterationCount: 1,
-    delay: 0,
-    easing: 0,
-    time: -1,
-    css: false,
-    autoplay: false,
-    onPlay: () => undefined,
-    onPaused: () => undefined,
-    onEnded: () => undefined,
-    onTimeUpdate: () => undefined,
-    onIteration: () => undefined,
-    onAnimate: () => undefined,
-  };
-  protected item!: T;
-  protected events: IObject<any> = {
-    play: (e: any) => this.props.onPlay!(e),
-    paused: (e: any) => this.props.onPaused!(e),
-    ended: (e: any) => this.props.onEnded!(e),
-    timeupdate: (e: any) => this.props.onTimeUpdate!(e),
-    iteration: (e: any) => this.props.onIteration!(e),
-    animate: (e: any) => this.props.onAnimate!(e),
-  };
-  public render() {
-    return ([] as any[]).concat(this.props.children!)[0];
-  }
-  public componentDidUpdate() {
-    if (this.props.time !== -1 && (this.props.autoplay === false || this.item.getPlayState() === "paused")) {
-      this.item.setTime(this.props.time!);
+    public static defaultProps: ScenePropTypes = {
+        duration: 0,
+        fillMode: "forwards",
+        direction: "normal",
+        playSpeed: 1,
+        iterationCount: 1,
+        delay: 0,
+        easing: 0,
+        time: -1,
+        css: false,
+        autoplay: false,
+        ready: true,
+        onPlay: () => undefined,
+        onPaused: () => undefined,
+        onEnded: () => undefined,
+        onTimeUpdate: () => undefined,
+        onIteration: () => undefined,
+        onAnimate: () => undefined,
+    };
+    public state = { ready: false };
+    protected item!: T;
+    protected events: IObject<any> = {
+        play: (e: any) => this.props.onPlay!(e),
+        paused: (e: any) => this.props.onPaused!(e),
+        ended: (e: any) => this.props.onEnded!(e),
+        timeupdate: (e: any) => this.props.onTimeUpdate!(e),
+        iteration: (e: any) => this.props.onIteration!(e),
+        animate: (e: any) => this.props.onAnimate!(e),
+    };
+    public render() {
+        return ([] as any[]).concat(this.props.children!)[0];
     }
-  }
-  public componentWillUnmount() {
-    this.item.off();
-  }
-  public setTime(time: number | string) {
-    this.item.setTime(time);
-  }
-  public getTime() {
-    return this.item.getTime();
-  }
-  public play() {
-    this.props.css !== false ? this.item.playCSS() : this.item.play();
-  }
-  public pause() {
-    this.item.pause();
-  }
-  public isPaused() {
-    return this.item.isPaused();
-  }
-  public getItem() {
-    return this.item;
-  }
-  public getDuration() {
-    return this.item.getDuration();
-  }
-  protected init() {
-    const item = this.item;
-    const events = this.events;
-    const sceneOptions: Partial<AnimatorState> = {};
-
-    if (this.props.keyframes) {
-      this.item.load(this.props.keyframes);
+    public componentDidUpdate() {
+        if (this.props.ready && !this.state.ready) {
+            this.init();
+        }
+        if (this.props.time !== -1 && (this.props.autoplay === false || this.item.getPlayState() === "paused")) {
+            this.item.setTime(this.props.time!);
+        }
+    }
+    public componentWillUnmount() {
+        this.item.off();
+    }
+    public setTime(time: number | string) {
+        this.item.setTime(time);
+    }
+    public getTime() {
+        return this.item.getTime();
+    }
+    public play() {
+        this.props.css !== false ? this.item.playCSS() : this.item.play();
     }
-    OPTIONS.forEach(name => {
-      sceneOptions[name] = this.props[name] as any;
-    });
-    (item as any).setOptions(sceneOptions);
-    EVENTS.forEach(name => {
-      this.item.on(name, events[name]);
-    });
-    if (this.props.autoplay !== false) {
-      this.play();
-    } else if (this.props.time !== -1) {
-      this.setTime(this.props.time!);
-    } else {
-      this.setTime(0);
+    public pause() {
+        this.item.pause();
+    }
+    public isPaused() {
+        return this.item.isPaused();
+    }
+    public getItem() {
+        return this.item;
+    }
+    public getDuration() {
+        return this.item.getDuration();
+    }
+    protected init() {
+        const state = this.state;
+        if (!this.props.ready || state.ready) {
+            return;
+        }
+        state.ready = true;
+        const item = this.item;
+        const events = this.events;
+        const sceneOptions: Partial<AnimatorState> = {};
+
+        if (this.props.keyframes) {
+            this.item.load(this.props.keyframes);
+        }
+        OPTIONS.forEach(name => {
+            sceneOptions[name] = this.props[name] as any;
+        });
+        (item as any).setOptions(sceneOptions);
+        EVENTS.forEach(name => {
+            this.item.on(name, events[name]);
+        });
+        if (this.props.autoplay !== false) {
+            this.play();
+        } else if (this.props.time !== -1) {
+            this.setTime(this.props.time!);
+        } else {
+            this.setTime(0);
+        }
     }
-  }
 }

packages/preact-scenejs/src/preact-scenejs/types.ts

@@ -4,16 +4,17 @@ import { IObject } from "@daybrush/utils";
 type Callback = (...args: any[]) => any;
 
 export interface EventTypes {
-  onPlay?: Callback;
-  onPaused?: Callback;
-  onEnded?: Callback;
-  onTimeUpdate?: Callback;
-  onIteration?: Callback;
-  onAnimate?: Callback;
+    onPlay?: Callback;
+    onPaused?: Callback;
+    onEnded?: Callback;
+    onTimeUpdate?: Callback;
+    onIteration?: Callback;
+    onAnimate?: Callback;
 }
 export interface ScenePropTypes extends Partial<AnimatorOptions>, EventTypes {
-  keyframes?: IObject<any>;
-  css?: boolean;
-  time?: string | number;
-  autoplay?: boolean;
+    ready?: boolean;
+    keyframes?: IObject<any>;
+    css?: boolean;
+    time?: string | number;
+    autoplay?: boolean;
 }

packages/vue-scenejs/README.md

@@ -30,6 +30,7 @@ $ npm install vue-scenejs
     :time="0"
     :css="false"
     :autoplay="false"
+    :ready="true"
     @play="onPlay"
     @paused="onPaused"
     @ended="onEnded"
@@ -85,6 +86,7 @@ $ npm install vue-scenejs
 |css|boolean|false|Check to play with CSS|
 |autoplay|boolean|false|Check to play automatically|
 |keyframes|object|{}|Specify properties by time.|
+|ready|boolean|true|Check if you are ready to init and play.|
 |...options|||[Check out the options](https://daybrush.github.io/scenejs/release/latest/doc/global.html#AnimatorOptions)|
 |...events|||[Check out Scene's events](https://daybrush.com/scenejs/release/latest/doc/Scene.html#events)<br/> [Check out SceneItem's events](https://daybrush.com/scenejs/release/latest/doc/SceneItem.html#events)|
 

packages/vue-scenejs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-scenejs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A Vue Component that create JavaScript & CSS timeline-based animation with Scene.js",
   "main": "dist/scene.cjs.js",
   "module": "dist/scene.esm.js",

packages/vue-scenejs/src/vue-scenejs/SceneInterface.ts

@@ -47,10 +47,15 @@ import { SceneProps } from './types';
             type: Number,
             default: 1,
         },
+        ready: {
+            type: Boolean,
+            default: true,
+        },
     },
 })
 class SceneInterface<T extends Scene | SceneItem> extends Vue {
     protected item!: T;
+    protected isReady: boolean = false;
     public setTime(time: number | string) {
         this.item.setTime(time);
     }
@@ -73,6 +78,10 @@ class SceneInterface<T extends Scene | SceneItem> extends Vue {
         return this.item.getDuration();
     }
     protected init() {
+        if (!this.ready || this.isReady) {
+            return;
+        }
+        this.isReady = true;
         const item = this.item;
         const sceneOptions: Partial<AnimatorState> = {};
 
@@ -101,6 +110,9 @@ class SceneInterface<T extends Scene | SceneItem> extends Vue {
         return this.$slots.default![0];
     }
     protected updated() {
+        if (this.ready && !this.isReady) {
+            this.init();
+        }
         if (this.time !== -1 && (this.autoplay === false || this.item.getPlayState() === 'paused')) {
             this.item.setTime(this.time);
         }

packages/vue-scenejs/src/vue-scenejs/types.ts

@@ -9,6 +9,7 @@ export interface SceneComponent {
 
 
 export interface SceneProps {
+    ready: boolean;
     keyframes: IObject<any>;
     css: boolean;
     autoplay: boolean;