@xtia/timeline 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.d.ts CHANGED
@@ -1,268 +1,5 @@
1
- type PointEvent = {
2
- direction: -1 | 1;
3
- };
4
- declare const EndAction: {
5
- readonly pause: 0;
6
- readonly continue: 1;
7
- readonly wrap: 2;
8
- readonly restart: 3;
9
- };
10
- /**
11
- * Creates an autoplaying Timeline and returns a range from it
12
- * @param duration
13
- * @returns Object representing a range on a single-use, autoplaying Timeline
14
- */
15
- export declare function animate(duration: number): TimelineRange;
16
- export declare class Timeline {
17
- /**
18
- * Multiplies the speed at which `play()` progresses through the Timeline
19
- *
20
- * A value of 2 would double progression speed while .25 would slow it to a quarter
21
- */
22
- timeScale: number;
23
- get currentTime(): number;
24
- set currentTime(v: number);
25
- get isPlaying(): boolean;
26
- get end(): TimelinePoint;
27
- private _currentTime;
28
- private _endPosition;
29
- private interval;
30
- private points;
31
- private endAction;
32
- private ranges;
33
- private currentSortDirection;
34
- private smoothSeeker;
35
- private seeking;
36
- readonly start: TimelinePoint;
37
- private positionHandlers;
38
- constructor();
39
- /**
40
- * @param autoplay Pass `true` to begin playing at (1000 x this.timeScale) units per second immediately on creation
41
- */
42
- constructor(autoplay: boolean);
43
- /**
44
- * Creates a Timeline that begins playing immediately at (1000 x this.timeScale) units per second
45
- * @param autoplayFps Specifies frames per second
46
- */
47
- constructor(autoplayFps: number);
48
- /**
49
- * @param autoplay If this argument is `true`, the Timeline will begin playing immediately on creation. If the argument is a number, the Timeline will begin playing at the specified frames per second
50
- * @param endAction Specifies what should happen when the final position is passed by `play()`/`autoplay`
51
- *
52
- * `"pause"`: **(default)** the Timeline will pause at its final position
53
- * `"continue"`: The Timeline will continue progressing beyond its final position
54
- * `"restart"`: The Timeline will seek back to 0 then forward to account for any overshoot and continue progressing
55
- * `"wrap"`: The Timeline's position will continue to increase beyond the final position, but Points and Ranges will be activated as if looping
56
- * `{restartAt: number}`: Like `"restart"` but seeking back to `restartAt` instead of 0
57
- * `{wrapAt: number}`: Like `"wrap"` but as if restarting at `wrapAt` instead of 0
58
- */
59
- constructor(autoplay: boolean | number, endAction: {
60
- wrapAt: number;
61
- } | {
62
- restartAt: number;
63
- } | keyof typeof EndAction);
64
- /**
65
- * @deprecated "loop" endAction will be removed; use "restart" or `{restartAt: 0}` (disambiguates new looping strategies)
66
- */
67
- constructor(autoplay: boolean | number, endAction: "loop");
68
- /**
69
- * Defines a single point on the Timeline
70
- *
71
- * @param position
72
- * @returns A point on the Timeline as specified
73
- *
74
- * Listenable: this point will emit a PointEvent whenever a `seek()` reaches or passes it
75
- */
76
- point(position: number): TimelinePoint;
77
- /**
78
- * Defines a range on this Timeline
79
- *
80
- * @param start The position on this Timeline at which the range starts
81
- * @param duration Length of the resulting range - if omitted, the range will end at the Timeline's **current** final position
82
- * @returns A range on the Timeline
83
- *
84
- * Listenable: this range will emit a progression value (0..1) when a `seek()` passes or intersects it
85
- */
86
- range(start: number | TimelinePoint, duration?: number): TimelineRange;
87
- /**
88
- * Creates an observable range from position 0 to the Timeline's **current** final position
89
- */
90
- range(): TimelineRange;
91
- private getWrappedPosition;
92
- /**
93
- * Seeks the Timeline to a specified position, triggering in order any point and range subscriptions between its current and new positions
94
- * @param toPosition
95
- */
96
- seek(toPosition: number | TimelinePoint): void;
97
- /**
98
- * Smooth-seeks to a specified position
99
- *
100
- * Aborts and replaces any on-going smooth-seek process on this Timeline
101
- * @param toPosition
102
- * @param duration Duration of the smooth-seek process in milliseconds
103
- * @param easer Optional easing function for the smooth-seek process
104
- * @returns A promise, resolved when the smooth-seek process finishes
105
- */
106
- seek(toPosition: number | TimelinePoint, duration: number, easer?: Easer | keyof typeof easers): Promise<void>;
107
- private seekDirect;
108
- private seekPoints;
109
- private seekRanges;
110
- private sortEntries;
111
- /**
112
- * Starts progression of the Timeline from its current position at (1000 x this.timeScale) units per second
113
- */
114
- play(): void;
115
- play(fps: number): void;
116
- pause(): void;
117
- /**
118
- * Progresses the Timeline by 1 unit
119
- * @param delta
120
- * @deprecated Use timeline.position++
121
- */
122
- step(): void;
123
- /**
124
- * Progresses the Timeline by a given delta
125
- * @param delta
126
- * @deprecated Use timeline.position += n
127
- */
128
- step(delta: number): void;
129
- tween<T extends Tweenable>(start: number | TimelinePoint, duration: number, apply: (v: T) => void, from: T, to: T, easer?: Easer): ChainingInterface;
130
- tween<T extends Tweenable>(start: number | TimelinePoint, end: TimelinePoint, // ease migration for tl.tween(0, tl.end, ...)
131
- apply: (v: T) => void, from: T, to: T, easer?: Easer): ChainingInterface;
132
- at(position: number | TimelinePoint, action?: () => void, reverse?: boolean | (() => void)): ChainingInterface;
133
- private createChainingInterface;
134
- /**
135
- * @deprecated use `timeline.currentTime`
136
- */
137
- get position(): number;
138
- }
139
- interface ChainingInterface {
140
- thenTween(duration: number, apply: (v: number) => void, from?: number, to?: number, easer?: Easer): ChainingInterface;
141
- then(action: () => void): ChainingInterface;
142
- thenWait(duration: number): ChainingInterface;
143
- readonly end: TimelinePoint;
144
- }
145
- export interface TimelineRange extends RangeProgression {
146
- /**
147
- * Creates two ranges by seperating one at a given point
148
- * @param position Point of separation, relative to the range's start - if omitted, the range will be separated halfway
149
- *
150
- * Must be greater than 0 and less than the range's duration
151
- */
152
- bisect(position?: number): [TimelineRange, TimelineRange];
153
- /**
154
- * Creates a series of evenly-spread points across the range, excluding the range's start and end
155
- * @param count Number of Points to return
156
- */
157
- spread(count: number): TimelinePoint[];
158
- /**
159
- * Progresses the Timeline across the range
160
- * @param easer
161
- */
162
- play(easer?: Easer): Promise<void>;
163
- /** The point on the Timeline at which this range begins */
164
- readonly start: TimelinePoint;
165
- /** The point on the Timeline at which this range ends */
166
- readonly end: TimelinePoint;
167
- /** The duration of this range */
168
- readonly duration: number;
169
- }
170
- export interface TimelinePoint extends Emitter<PointEvent> {
171
- /**
172
- * Creates a range on the Timeline, with a given duration, starting at this point
173
- * @param duration
174
- */
175
- range(duration: number): TimelineRange;
176
- /**
177
- * Creates a range on the Timeline, with a given end point, starting at this point
178
- * @param endPoint
179
- */
180
- to(endPoint: number | TimelinePoint): TimelineRange;
181
- /**
182
- * Creates a point on the Timeline at an offset position from this one
183
- * @param timeOffset
184
- */
185
- delta(timeOffset: number): TimelinePoint;
186
- /**
187
- * The point's absolute position on the Timeline
188
- */
189
- readonly position: number;
190
- }
191
- type Tweenable = number | number[] | string | Blendable;
192
- interface Blendable {
193
- blend(target: this, progress: number): this;
194
- }
195
- type Handler<T> = (value: T) => void;
196
- type Disposer = () => void;
197
- interface Emitter<T> {
198
- /**
199
- * Registers a function to receive emitted values
200
- * @param handler
201
- * @returns A function to deregister the handler
202
- */
203
- listen(handler: Handler<T>): Disposer;
204
- map<R>(mapFunc: (value: T) => R): Emitter<R>;
205
- /**
206
- * Selectively forwards emissions along the chain
207
- * @param check Function that takes an emitted value and returns true if the emission should be forwarded along the chain
208
- */
209
- filter(check: (value: T) => boolean): Emitter<T>;
210
- /**
211
- * Discards emitted values that are the same as the last emitted value
212
- * @param compare Function that takes the previous and next values and returns true if they should be considered equal
213
- */
214
- noRepeat(compare?: (a: T, b: T) => boolean): Emitter<T>;
215
- }
216
- export interface TweenEmitter<T extends Tweenable> extends Emitter<T> {
217
- }
218
- export interface RangeProgression extends Emitter<number> {
219
- /**
220
- * Creates a chainable progress emitter that applies an easing function to its parent's emitted values
221
- *
222
- * @param easer An easing function of the form `(progression: number) => number`
223
- * @returns Listenable: emits an eased value
224
- */
225
- ease(easer?: Easer | keyof typeof easers): RangeProgression;
226
- /**
227
- * Creates an emitter that interpolates two given values by progression emitted by its parent
228
- *
229
- * Can interpolate types `number`, `number[]`, string and objects with a `blend(from: this, to: this): this` method
230
- *
231
- * #### String interpolation
232
- * * If the strings contain tweenable tokens (numbers, colour codes) and are otherwise identical, those tokens are interpolated
233
- * * Otherwise the `from` string is progressively replaced, left-to-right, with the `to` string
234
- *
235
- * eg
236
- * ```ts
237
- * range
238
- * .tween("0px 0px 0px #0000", "4px 4px 8px #0005")
239
- * .listen(s => element.style.textShadow = s);
240
- * ```
241
- *
242
- * @param from Value to interpolate from
243
- * @param to Value to interpolate to
244
- * @returns Listenable: emits an interpolated value
245
- */
246
- tween<T extends Tweenable>(from: T, to: T): TweenEmitter<T>;
247
- }
248
- type Easer = (n: number) => number;
249
- export declare const easers: {
250
- linear: (x: number) => number;
251
- easeIn: (x: number) => number;
252
- easeIn4: (x: number) => number;
253
- easeOut: (x: number) => number;
254
- easeOut4: (x: number) => number;
255
- circleIn: (x: number) => number;
256
- circleIn4: (x: number) => number;
257
- circleOut: (x: number) => number;
258
- circleOut4: (x: number) => number;
259
- easeInOut: (x: number) => number;
260
- elastic: (x: number) => number;
261
- overshootIn: (x: number) => number;
262
- bounce: (x: number) => number;
263
- noise: (x: number) => number;
264
- step2: (x: number) => 0 | 1 | 0.5;
265
- step3: (x: number) => 0 | 1 | 0.333 | 0.667;
266
- pingpong: (x: number) => number;
267
- };
268
- export {};
1
+ export { Timeline, animate, ChainingInterface } from "./internal/timeline";
2
+ export { TimelinePoint, PointEvent } from "./internal/point";
3
+ export { RangeProgression, TimelineRange } from "./internal/range";
4
+ export { Emitter, UnsubscribeFunc } from "./internal/emitters";
5
+ export { easers } from "./internal/easing";