Scene

Scene

manage sceneItems and play Scene.

Constructor

new Scene(propertiesopt, optionsopt)

Source:
Name Type Description
properties? {options?: Partial<SceneOptions>} & IObject<any> properties
options? Partial<SceneOptions> options
Example
const scene = new Scene({
      item1: {
        0: {
          display: "none",
        },
        1: {
          display: "block",
          opacity: 0,
        },
        2: {
          opacity: 1,
        },
      },
      item2: {
        2: {
          opacity: 1,
        },
      }
    });

Extends

Members

(static) EVENTS: EventType

Source:
Event name list
Type:
Example
Scene.EVENTS // ["paused", "ended", "timeupdate", "animate", "play", "iteration"];

(static) OPTIONS: OptionType

Source:
option name list
Type:
Example
Scene.OPTIONS // ["duration", "fillMode", "direction", "iterationCount", "delay", "easing", "playSpeed"]

(static) VERSION: string

Source:
version info
Type:
  • string
Example
Scene.VERSION // #__VERSION__#

Methods

(static) isRole(args, isLastopt) → {boolean}

Source:
Name Type Description
args NameType[] Property names
isLast? boolean Whether the property is the last property that cannot be an object (non-partitionable)
Returns:
Type
boolean

clear() → {Scene}

Source:
Clear All Items
Returns:
An instance itself
Type
Scene

emit(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName string | ... Event name
param? TargetParam<any> | ... {} Event parameter

emit<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends Param ? Name : never

emit<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

end() → {Animator}

Source:
Overrides:
end animator
Returns:
An instance itself.
Type
Animator

exportCSS(playConditionopt, durationopt, parentStatesopt) → {Scene}

Source:
Export the CSS of the items to the style.
Name Type Description
playCondition? PlayCondition Add a selector or className to play.
duration? number
parentStates? AnimatorState[]
Returns:
An instance itself
Type
Scene

finish() → {Animator}

Source:
Overrides:
end animator
Returns:
An instance itself.
Type
Animator

forEach(func) → {Scene}

Source:
executes a provided function once for each scene item.
Name Type Description
func (item: Scene | SceneItem, id: string | number, index: number, items: IObject<Scene | SceneItem>) => void Function to execute for each element, taking three arguments
Returns:
An instance itself
Type
Scene

getActiveDuration(delayopt) → {number}

Source:
Overrides:
Get the animator's total duration excluding delay
Name Type Description
delay? boolean
Example
animator.getActiveDuration();
Returns:
Total duration excluding delay
Type
number

getCurrentFlattedFrames(needUpdateopt, parentEasingopt) → {Record<string, Frame>}

Source:
Get the current flatted computed frames. (If needUpdate is true, get a new computed frames, not the temp that has already been saved.) If there is a scene in the scene, you can get a flatted frame map.
Name Type Description
needUpdate? boolean
parentEasing? EasingType
Example
import Scene, { NAME_SEPARATOR } from "scenejs";

{
  "a": Frame,
  "b": {
    "b1": Frame,
    "b2": Frame,
  },
}
const frames = scene.getCurrentFrames();
{
  "a": Frame,
  "b_///_b1": Frame,
  "b_///_b2": Frame,
}
const frames = scene.getCurrentFlattedFrames();
Returns:
Type
Record<string, Frame>

getCurrentFrames(needUpdateopt, parentEasingopt)

Source:
Get the current computed frames. (If needUpdate is true, get a new computed frames, not the temp that has already been saved.)
Name Type Description
needUpdate? boolean
parentEasing? EasingType

getDelay() → {number}

Source:
Overrides:
Get a delay for the start of an animation.
Returns:
delay
Type
number

getDirection() → {DirectionType}

Source:
Overrides:
Get whether an animation should be played forwards, backwards or in alternate cycles.
Returns:
direction
Type
DirectionType

getDuration() → {number}

Source:
Overrides:
Get how long an animation should take to complete one cycle.
Returns:
duration
Type
number

getEasing() → {EasingType}

Source:
Overrides:
Get the speed curve of an animation.
Returns:
easing
Type
EasingType

getEasingName() → {string}

Source:
Overrides:
Get the speed curve's name
Returns:
the curve's name.
Type
string

getFillMode() → {FillModeType}

Source:
Overrides:
Get fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Returns:
fillMode
Type
FillModeType

getId() → {number|string}

Source:
Overrides:
Specifies the unique indicator of the animator
Returns:
the indicator of the item.
Type
number | string

getItem(name) → {Scene|SceneItem}

Source:
get item in scene by name
Name Type Description
name number | string The item's name

getItem<T extends (Scene | SceneItem) = Scene | SceneItem>(name) → {T}

Name Type Description
name number | string
Example
const item = scene.getItem("item1")
Returns:
item
Type
Scene | SceneItem

getIterationCount() → {IterationCountType}

Source:
Overrides:
Get the number of times an animation should be played.
Returns:
iterationCount
Type
IterationCountType

getIterationTime() → {number}

Source:
Overrides:
Get the animator's current iteration time
Example
animator.getIterationTime();
Returns:
current iteration time
Type
number

getOrders() → {NameType[]}

Source:
get item orders
Example
scene.getOrders() // => ["item1", "item2"]
Returns:
Type
NameType[]

getPlaySpeed() → {number}

Source:
Overrides:
Get the animator's play speed
Returns:
playSpeed
Type
number

getPlayState() → {PlayStateType}

Source:
Overrides:
Get whether the animation is running or paused.
Returns:
playState
Type
PlayStateType

getTime() → {number}

Source:
Overrides:
Get the animator's current time
Example
animator.getTime();
Returns:
current time
Type
number

getTotalDuration() → {number}

Source:
Overrides:
Get the animator's total duration including delay
Example
animator.getTotalDuration();
Returns:
Total duration
Type
number

isDelay() → {boolean}

Source:
Overrides:
Check if the current state of animator is delayed.
Returns:
check delay state
Type
boolean

isEnded() → {boolean}

Source:
Overrides:
Check if the animator has reached the end.
Example
animator.isEnded(); // true or false
Returns:
ended
Type
boolean

isPaused() → {boolean}

Source:
Overrides:
Check if the animator is paused:
Example
animator.isPaused(); // true or false
Returns:
paused
Type
boolean

newItem(name, optionsopt) → {Scene | SceneItem}

Source:
create item in scene
Name Type Default Description
name number | string name of item to create
options? Partial<SceneItemOptions> {} The option object of SceneItem
Example
const item = scene.newItem("item1")
Returns:
Newly created item
Type
Scene | SceneItem

off(eventNameopt, listeneropt) → {this}

Source:
Overrides:
Remove listeners registered in the event target.
Name Type Description
eventName? string | object | ... Name of the event to be removed
listener? EventListener<Events[any], this> | ... listener function of the event to be removed

off<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName? Name
listener? EventListener<Param, this>

off(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Remove all listeners.
emitter.off();

// Remove all listeners in "A" event.
emitter.off("a");


// Remove "listener" listener in "a" event.
emitter.off("a", listener);
Returns:
Type
this

on(eventName, listeneropt) → {this}

Source:
Overrides:
Add a listener to the registered event.
Name Type Description
eventName string | object | ... Name of the event to be added
listener? EventListener<Events[any], this> | ... listener function of the event to be added

on<Name extends keyof Events, Param = Events[Name]>(eventName, listener) → {this}

Name Type Description
eventName Name
listener EventListener<Param, this>

on(events) → {this}

Name Type Description
events EventHash<Events, this>
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add listener in "a" event
emitter.on("a", () => {
});
// Add listeners
emitter.on({
 a: () => {},
 b: () => {},
});
Returns:
Type
this

once<Name extends keyof Events & string, Param = Events[Name]>(eventName, listeneropt) → {Promise<OnEvent<Param, this>>}

Source:
Overrides:
Add a disposable listener and Use promise to the registered event.
Name Type Description
eventName Name Name of the event to be added
listener? EventListener<Param, this> disposable listener function of the event to be added
Example
import EventEmitter from "@scena/event-emitter";
cosnt emitter = new EventEmitter();

// Add a disposable listener in "a" event
emitter.once("a", () => {
});

// Use Promise
emitter.once("a").then(e => {
});
Returns:
Type
Promise<OnEvent<Param, this>>

pause() → {Animator}

Source:
Overrides:
pause animator
Returns:
An instance itself.
Type
Animator

play(toTimeopt) → {Animator}

Source:
Overrides:
play animator
Name Type Description
toTime? number
Returns:
An instance itself.
Type
Animator

playCSS(isExportCSSopt, playClassNameopt, propertiesopt) → {Scene}

Source:
See:
Play using the css animation and keyframes.
Name Type Default Description
isExportCSS? true Check if you want to export css.
playClassName? string "startAnimation" Add a class name to play.
properties? Partial<AnimatorState> {} The shorthand properties for six of the animation properties.
Example
scene.playCSS();
    scene.playCSS(false, {
    direction: "reverse",
    fillMode: "forwards",
    });
Returns:
An instance itself
Type
Scene

removeItem(name) → {this}

Source:
remove item in scene
Name Type Description
name number | string name of item to remove
Example
const item = scene.newItem("item1")

    scene.removeItem("item1");
Returns:
An instance itself
Type
this

set(properties) → {this}

Source:
Set properties to the Scene.
Name Type Description
properties any properties

set(properties, ...args) → {this}

Name Type Description
properties any
...args any[]
Example
scene.set({
    ".a": {
        0: {
            opacity: 0,
        },
        1: {
            opacity: 1,
        },
    },
});
// 0
console.log(scene.getItem(".a").get(0, "opacity"));
// 1
console.log(scene.getItem(".a").get(1, "opacity"));
Returns:
An instance itself
Type
this

setDelay(delay) → {Animator}

Source:
Overrides:
Set a delay for the start of an animation.
Name Type Description
delay number delay
Returns:
An instance itself.
Type
Animator

setDirection(direction) → {Animator}

Source:
Overrides:
Set whether an animation should be played forwards, backwards or in alternate cycles.
Name Type Description
direction DirectionType direction
Returns:
An instance itself.
Type
Animator

setDuration(duration) → {Animator}

Source:
Overrides:
Set how long an animation should take to complete one cycle.
Name Type Description
duration number duration
Returns:
An instance itself.
Type
Animator

setEasing(curverArray) → {Animator}

Source:
Overrides:
set animator's easing.
Name Type Description
curverArray string | number[] | EasingFunction The speed curve of an animation.
Example
animator.({
      delay: 2,
      diretion: "alternate",
      duration: 2,
      fillMode: "forwards",
      iterationCount: 3,
      easing: Scene.easing.EASE,
  });
Returns:
An instance itself.
Type
Animator

setFillMode(fillMode) → {Animator}

Source:
Overrides:
Set fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Name Type Description
fillMode FillModeType fillMode
Returns:
An instance itself.
Type
Animator

setId() → {Animator}

Source:
Overrides:
Specifies the unique indicator of the animator
Type Description
number | string String or number of id to be set in the animator
Returns:
An instance itself.
Type
Animator

setItem(name, item)

Source:
add a sceneItem to the scene
Name Type Description
name number | string name of item to create
item Scene | SceneItem sceneItem
Example
const item = scene.newItem("item1")

setIterationCount(iterationCount) → {Animator}

Source:
Overrides:
Set the number of times an animation should be played.
Name Type Description
iterationCount IterationCountType iterationCount
Returns:
An instance itself.
Type
Animator

setOptions(optionsopt) → {Animator}

Source:
Overrides:
See:
set animator's options.
Name Type Default Description
options? Partial<AnimatorOptions> {} animator's options
Example
animator.({
      delay: 2,
      diretion: "alternate",
      duration: 2,
      fillMode: "forwards",
      iterationCount: 3,
      easing: Scene.eaasing.EASE,
  });
Returns:
An instance itself.
Type
Animator

setOrders(orders) → {NameType[]}

Source:
set item orders
Name Type Description
orders NameType[] orders
Example
frame.setOrders(["item2", "item1"]) // => ["item2", "item1"]
Returns:
Type
NameType[]

setPlaySpeed(playSpeed) → {Animator}

Source:
Overrides:
Set the animator's play speed
Name Type Description
playSpeed number playSpeed
Returns:
An instance itself.
Type
Animator

setPlayState(playState) → {Animator}

Source:
Overrides:
Set whether the animation is running or paused.
Name Type Description
playState PlayStateType playState
Returns:
An instance itself.
Type
Animator

setTime(time, isTickopt, isParentopt, execopt) → {Animator}

Source:
Overrides:
set currentTime
Name Type Description
time Number | String currentTime
isTick? boolean
isParent? boolean
exec? () => void
Example
animator.setTime("from"); // 0
  animator.setTime("to"); // 100%
  animator.setTime("50%");
  animator.setTime(10);
  animator.getTime() // 10
Returns:
An instance itself.
Type
Animator

trigger<Name extends keyof Events>(eventName, paramopt) → {boolean}

Source:
Overrides:
Fires an event to call listeners.
Name Type Default Description
eventName Name | ... Event name
param? TargetParam<any> | ... {} Event parameter

trigger<Name extends keyof Events, Param = Events[Name]>(eventName) → {boolean}

Name Type Description
eventName extends TargetParam<Param> ? Name : never

trigger<Name extends keyof Events, Param = Events[Name]>(eventName, param) → {boolean}

Name Type Description
eventName Name
param TargetParam<Param>
Example
import EventEmitter from "@scena/event-emitter";


const emitter = new EventEmitter();

emitter.on("a", e => {
});


emitter.emit("a", {
  a: 1,
});
Returns:
If false, stop the event.
Type
boolean

Events

animate

Source:
This event is fired when timeupdate and animate.
Name Type Description
param object The object of data to be sent to an event.
Properties
Name Type Description
currentTime number The total time that the animator is running.
time number The iteration time during duration that the animator is running.
frames object frames of that time.
Example
const scene = new Scene({
    a: {
        0: {
            opacity: 0,
        },
        1: {
            opacity: 1,
        }
    },
    b: {
        0: {
            opacity: 0,
        },
        1: {
            opacity: 1,
        }
    }
}).on("animate", e => {
    console.log(e.frames);
    // {a: Frame, b: Frame}
    console.log(e.frames.a.get("opacity"));
});

ended

Source:
Overrides:
This event is fired when animator is ended.

iteration

Source:
Overrides:
The event is fired when an iteration of an animation ends.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
iterationCount Number The iteration count that the animator is running.

paused

Source:
Overrides:
This event is fired when animator is paused.

play

Source:
Overrides:
This event is fired when play animator.

timeupdate

Source:
Overrides:
This event is fired when the animator updates the time.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
time Number The iteration time during duration that the animator is running.
iterationCount Number The iteration count that the animator is running.