GTKX

API Reference / @gtkx/animated / Controller

Class: Controller<State> ​

Type Parameters ​

State ​

State extends Lookup = Lookup

Constructors ​

Constructor ​

new Controller<State>(props?, flush?): Controller<State>

Parameters ​

props? ​

ControllerUpdate<State, undefined> | null

flush? ​

ControllerFlushFn<any>

Returns ​

Controller<State>

Properties ​

_active ​

protected _active: Set<FrameValue<any>>

The values currently being animated

_changed ​

protected _changed: Set<FrameValue<any>>

The values that changed recently

_events ​

protected _events: object

The event queues that are flushed once per frame maximum

onChange ​

onChange: Map<OnChange<SpringValue<State>, Controller<State>, any>, AnimationResult<any>>

onRest ​

onRest: Map<OnRest<SpringValue<State>, Controller<State>, any>, AnimationResult<any>>

onStart ​

onStart: Map<OnStart<SpringValue<State>, Controller<State>, any>, AnimationResult<any>>

_flush? ​

protected optional _flush?: ControllerFlushFn<Controller<State>>

Custom handler for flushing update queues

_initialProps? ​

protected optional _initialProps?: Lookup<any>

These props are used by all future spring values

_lastAsyncId ​

protected _lastAsyncId: number

The counter for tracking scheduleProps calls

_lastLoopId ​

protected _lastLoopId: number

Token identifying the in-flight loop chain. Bumped on every top-level flushUpdate so a subsequent loop iteration can detect that a newer external update has superseded it, and exit instead of dispatching another iteration. Without this, a loop: true → loop: false (or any non-loop) update from a re-render would race against the captured loop of the prior chain, which keeps recursing. See issue #1193.

_onLoopReset? ​

protected optional _onLoopReset?: Set<() => void>

Listeners notified synchronously each time flushUpdate recurses into the next loop iteration. Used by useTrail to keep chained children phase-aligned with the head controller's loop restarts.

_started ​

protected _started: boolean

Equals false when onStart listeners can be called

_state ​

protected _state: RunAsyncState<Controller<State>>

State used by the runAsync function

id ​

readonly id: number

queue ​

queue: ControllerQueue<State>

The queue of props passed to the update method.

ref? ​

optional ref?: SpringRef<State>

The injected ref. When defined, render-based updates are pushed onto the queue instead of being auto-started.

springs ​

springs: SpringValues<State>

The animated values

Accessors ​

idle ​

Get Signature ​

get idle(): boolean

Equals true when no spring values are in the frameloop, and no async animation is currently active.

Returns ​

boolean

item ​

Get Signature ​

get item(): any

Returns ​

any

Set Signature ​

set item(item): void

Parameters ​
item ​

any

Returns ​

void

Methods ​

_onFrame() ​

protected _onFrame(): void

Internal

Called at the end of every animation frame

Returns ​

void

each() ​

each(iterator): void

Call a function once per spring value

Parameters ​

iterator ​

(spring, key) => void

Returns ​

void

eventObserved() ​

eventObserved(event): void

Internal

Parameters ​

event ​

Event

Returns ​

void

get() ​

get(): State & UnknownProps

Get the current values of our springs

Returns ​

State & UnknownProps

onLoopReset() ​

onLoopReset(fn): () => void

Internal

Subscribe to loop iteration restarts on this controller. Returns an unsubscribe function. Listeners fire synchronously inside flushUpdate just before the next iteration is dispatched.

Parameters ​

fn ​

() => void

Returns ​

() => void

pause() ​

pause(keys?): this

Freeze the active animation in time

Parameters ​

keys? ​

OneOrMore<string>

Returns ​

this

resume() ​

resume(keys?): this

Resume the animation if paused.

Parameters ​

keys? ​

OneOrMore<string>

Returns ​

this

set() ​

set(values): void

Set the current values without animating.

Parameters ​

values ​

Partial<State>

Returns ​

void

start() ​

start(props?): AsyncResult<Controller<State>>

Start the queued animations for every spring, and resolve the returned promise once all queued animations have finished or been cancelled.

When you pass a queue (instead of nothing), that queue is used instead of the queued animations added with the update method, which are left alone.

Parameters ​

props? ​

OneOrMore<ControllerUpdate<State, undefined>> | null

Returns ​

AsyncResult<Controller<State>>

stop() ​

Call Signature ​

stop(): this

Stop all animations.

Returns ​

this

Call Signature ​

stop(keys): this

Stop animations for the given keys.

Parameters ​
keys ​

OneOrMore<string>

Returns ​

this

Call Signature ​

stop(cancel): this

Cancel all animations.

Parameters ​
cancel ​

boolean

Returns ​

this

Call Signature ​

stop(cancel, keys): this

Cancel animations for the given keys.

Parameters ​
cancel ​

boolean

keys ​

OneOrMore<string>

Returns ​

this

Call Signature ​

stop(keys?): this

Stop some or all animations.

Parameters ​
keys? ​

OneOrMore<string>

Returns ​

this

Call Signature ​

stop(cancel, keys?): this

Cancel some or all animations.

Parameters ​
cancel ​

boolean

keys? ​

OneOrMore<string>

Returns ​

this

update() ​

update(props): this

Push an update onto the queue of each value.

Parameters ​

props ​

ControllerUpdate<State, undefined> | Falsy

Returns ​

this