UNPKG

2.72 kBTypeScriptView Raw
1import { Observable } from '../../Observable';
2import { TimestampProvider } from '../../types';
3/**
4 * An observable of animation frames
5 *
6 * Emits the amount of time elapsed since subscription and the timestamp on each animation frame.
7 * Defaults to milliseconds provided to the requestAnimationFrame's callback. Does not end on its own.
8 *
9 * Every subscription will start a separate animation loop. Since animation frames are always scheduled
10 * by the browser to occur directly before a repaint, scheduling more than one animation frame synchronously
11 * should not be much different or have more overhead than looping over an array of events during
12 * a single animation frame. However, if for some reason the developer would like to ensure the
13 * execution of animation-related handlers are all executed during the same task by the engine,
14 * the `share` operator can be used.
15 *
16 * This is useful for setting up animations with RxJS.
17 *
18 * ## Examples
19 *
20 * Tweening a div to move it on the screen
21 *
22 * ```ts
23 * import { animationFrames, map, takeWhile, endWith } from 'rxjs';
24 *
25 * function tween(start: number, end: number, duration: number) {
26 * const diff = end - start;
27 * return animationFrames().pipe(
28 * // Figure out what percentage of time has passed
29 * map(({ elapsed }) => elapsed / duration),
30 * // Take the vector while less than 100%
31 * takeWhile(v => v < 1),
32 * // Finish with 100%
33 * endWith(1),
34 * // Calculate the distance traveled between start and end
35 * map(v => v * diff + start)
36 * );
37 * }
38 *
39 * // Setup a div for us to move around
40 * const div = document.createElement('div');
41 * document.body.appendChild(div);
42 * div.style.position = 'absolute';
43 * div.style.width = '40px';
44 * div.style.height = '40px';
45 * div.style.backgroundColor = 'lime';
46 * div.style.transform = 'translate3d(10px, 0, 0)';
47 *
48 * tween(10, 200, 4000).subscribe(x => {
49 * div.style.transform = `translate3d(${ x }px, 0, 0)`;
50 * });
51 * ```
52 *
53 * Providing a custom timestamp provider
54 *
55 * ```ts
56 * import { animationFrames, TimestampProvider } from 'rxjs';
57 *
58 * // A custom timestamp provider
59 * let now = 0;
60 * const customTSProvider: TimestampProvider = {
61 * now() { return now++; }
62 * };
63 *
64 * const source$ = animationFrames(customTSProvider);
65 *
66 * // Log increasing numbers 0...1...2... on every animation frame.
67 * source$.subscribe(({ elapsed }) => console.log(elapsed));
68 * ```
69 *
70 * @param timestampProvider An object with a `now` method that provides a numeric timestamp
71 */
72export declare function animationFrames(timestampProvider?: TimestampProvider): Observable<{
73 timestamp: number;
74 elapsed: number;
75}>;
76//# sourceMappingURL=animationFrames.d.ts.map
\No newline at end of file