MiniTimeline

import { MiniTimeline } from 'pixi-silk/ui/timeline';

Experimental

A compact animation timeline: a ruler you scrub, key dots you select and drag, a loop range and a playhead. Scrubbing past either end stretches like a rubber band. Keys snap to frames. Shift adds to the selection, and a drag on empty track draws a selection box. The wheel zooms around the pointer (sideways or with Shift it pans). A double tap on the ruler zooms in or back out. The top-left corner is at (0, 0). Keys are points in time: there are no curves or values.

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new MiniTimeline(options?: MiniTimelineOptions): MiniTimeline;

Experimental

Parameters#

Parameter	Type
`options`	`MiniTimelineOptions`

Returns#

MiniTimeline

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`state`	`readonly`	`TimelineState`	`Experimental` Playhead, playback, selection, loop range and view. Write to them to drive the timeline.	ui/timeline.ts:139

Accessors#

keys#

Get Signature#

get keys(): TimelineKey[];

Experimental

A copy of the keys. Changing it does not change the timeline: use MiniTimeline.setKeys.

Returns

TimelineKey[]

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the animation. Destroys children unless options says otherwise.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

dragTo()#

dragTo(x: number, _y?: number): void;

Experimental

Drags to a local point, as the pointer does.

Parameters#

Parameter	Type	Default value
`x`	`number`	`undefined`
`_y`	`number`	`0`

Returns#

void

panBy()#

panBy(frames: number): void;

Experimental

Shifts the view by frames, kept inside the track.

Parameters#

Parameter	Type
`frames`	`number`

Returns#

void

pressAt()#

pressAt(
   x: number, 
   y: number, 
   shift?: boolean
): void;

Experimental

Presses at a local point, as the pointer does. shift adds to the selection.

Parameters#

Parameter	Type	Default value
`x`	`number`	`undefined`
`y`	`number`	`undefined`
`shift`	`boolean`	`false`

Returns#

void

release()#

release(): void;

Experimental

Releases the press, as the pointer does.

Returns#

void

setKeys()#

setKeys(keys: TimelineKey[]): void;

Experimental

Replaces the keys with copies. Selected ids that no longer exist leave the selection.

Parameters#

Parameter	Type
`keys`	`TimelineKey`[]

Returns#

void

showAll()#

showAll(): void;

Experimental

Shows the whole track.

Returns#

void

tick()#

tick(dt: number): boolean;

Experimental

Advances playback and animation by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean

timeAt()#

timeAt(x: number): number;

Experimental

Frame under a local x (in the target view, not the animated one).

Parameters#

Parameter	Type
`x`	`number`

Returns#

number

toggle()#

toggle(): void;

Experimental

Starts or stops playback.

Returns#

void

xAt()#

xAt(time: number): number;

Experimental

Local x of a frame in the target view.

Parameters#

Parameter	Type
`time`	`number`

Returns#

number

zoomBy()#

zoomBy(factor: number, aroundTime?: number): void;

Experimental

Zooms the view by factor (above 1 zooms in) around aroundTime (default the playhead). The span stays between minSpan and the whole track.

Parameters#

Parameter	Type
`factor`	`number`
`aroundTime`	`number`

Returns#

void