Scene
A scene is the basic container for animations, managing animation rendering, state, and time.
Overview
The Scene interface defines the core functionality of scenes, including:
- Lifecycle management
- Rendering control
- State management
- Event system
Properties
Basic Properties
| Property | Type | Description |
|---|---|---|
name | string | Scene name |
playback | PlaybackStatus | Playback status reference |
meta | SceneMetadata | Scene metadata |
previous | Scene | null | Previous scene |
Managers
| Property | Type | Description |
|---|---|---|
timeEvents | TimeEvents | Time event manager |
shaders | Shaders | Shader manager (experimental) |
slides | Slides | Slide manager |
sounds | Sounds | Sound manager |
logger | Logger | Logger |
variables | Variables | Variable manager |
random | Random | Random number generator |
Signals
| Property | Type | Description |
|---|---|---|
previousOnTop | SignalValue<boolean> | Whether the previous scene is on top during transition |
Computed Properties
| Property | Return type | Description |
|---|---|---|
firstFrame | number | Scene start frame |
lastFrame | number | Scene end frame |
transitionDuration | number | Transition duration (frames) |
Events
| Event | Type | Description |
|---|---|---|
onCacheChanged | SubscribableValueEvent<CachedSceneData> | Cache change event |
onReloaded | SubscribableEvent<void> | Reload event |
onRecalculated | SubscribableEvent<void> | Recalculation event |
onRenderLifecycle | SubscribableEvent<[SceneRenderEvent, CanvasRenderingContext2D]> | Render lifecycle event |
onReset | SubscribableEvent<void> | Reset event |
Methods
Rendering
render(context: CanvasRenderingContext2D): Promise<void>
Renders the scene to the specified 2D canvas context.
reload(description?: SceneDescriptionReload<T>): void
Reloads the scene description.
recalculate(setFrame: (frame: number) => void): Promise<void>
Recalculates scene time.
Playback Control
next(): Promise<void>
Advances one frame.
reset(previous?: Scene): Promise<void>
Resets to initial state.
State Query
getSize(): Vector2
Gets the scene size.
getRealSize(): Vector2
Gets the actual rendering size.
isAfterTransitionIn(): boolean
Whether the scene is after the transition-in phase.
canTransitionOut(): boolean
Whether the scene can transition out.
isFinished(): boolean
Whether the scene is finished.
isCached(): boolean
Whether the scene is cached.
Lifecycle
enterInitial(): void
Enters the initial state.
enterAfterTransitionIn(): void
Enters the state after transition-in.
enterCanTransitionOut(): void
Enters the state where transition-out is possible.
Examples
import {makeScene2D, Circle} from '@wangyaoshen/locus';
export default makeScene2D(function* (view) {
const circle = new Circle({
radius: 100,
fill: 'red',
});
view.add(circle);
yield;
});