anim-engine 0.3.0 → 0.3.1
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/README.md
CHANGED
|
@@ -273,8 +273,8 @@ timeline.play();
|
|
|
273
273
|
|
|
274
274
|
```ts
|
|
275
275
|
type TimelineLayer =
|
|
276
|
-
| { animation:
|
|
277
|
-
| { animation:
|
|
276
|
+
| { animation: KeyframeAnimationOptions; at: DynamicValue }
|
|
277
|
+
| { animation: KeyframeAnimationOptions; gap: number };
|
|
278
278
|
```
|
|
279
279
|
|
|
280
280
|
| Parameter | Type | Description |
|
|
@@ -663,25 +663,25 @@ requestAnimationFrame(gameLoop);
|
|
|
663
663
|
|
|
664
664
|
### Type exports
|
|
665
665
|
|
|
666
|
-
| Type
|
|
667
|
-
|
|
|
668
|
-
| `Animation`
|
|
669
|
-
| `Interpolation`
|
|
670
|
-
| `Timeline`
|
|
671
|
-
| `EaseName`
|
|
672
|
-
| `EaseFunction`
|
|
673
|
-
| `DynamicValue`
|
|
674
|
-
| `AnimationStatus`
|
|
675
|
-
| `InterpolationStatus`
|
|
676
|
-
| `AnimationOptions`
|
|
677
|
-
| `Keyframe`
|
|
678
|
-
| `
|
|
679
|
-
| `TimelineLayer`
|
|
680
|
-
| `SpringOptions`
|
|
681
|
-
| `SmoothDampOptions`
|
|
682
|
-
| `LerpOptions`
|
|
683
|
-
| `RgbaTuple`
|
|
684
|
-
| `TickerControls`
|
|
666
|
+
| Type | Description |
|
|
667
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
668
|
+
| `Animation` | `play`, `pause`, `resume`, `stop`, `skipToEnd`, `kill`, `setProgress`, `currentValue`, `velocity`, `progress`, `status` |
|
|
669
|
+
| `Interpolation` | `start`, `stop`, `kill`, `setCurrentValue`, `currentValue`, `velocity`, `status` |
|
|
670
|
+
| `Timeline` | `play`, `pause`, `resume`, `stop`, `skipToEnd`, `kill`, `setProgress`, `progress`, `status` |
|
|
671
|
+
| `EaseName` | Union of 31 ease name strings |
|
|
672
|
+
| `EaseFunction` | `(t: number) => number` |
|
|
673
|
+
| `DynamicValue` | `number \| (() => number)` |
|
|
674
|
+
| `AnimationStatus` | `"playing" \| "paused" \| "stopped" \| "dead"` (for `Animation` / `Timeline`) |
|
|
675
|
+
| `InterpolationStatus` | `"active" \| "inactive" \| "dead"` (for `Interpolation`) |
|
|
676
|
+
| `AnimationOptions` | Single tween or keyframe animation options (discriminated union) |
|
|
677
|
+
| `Keyframe` | `{ value, gap?, ease? }` |
|
|
678
|
+
| `KeyframeAnimationOptions` | `{ keyframes: Keyframe[], onStarted?, onUpdate?, onProgress?, onEnded? }` |
|
|
679
|
+
| `TimelineLayer` | `{ animation: KeyframeAnimationOptions; at: DynamicValue } \| { animation: KeyframeAnimationOptions; gap: number }` |
|
|
680
|
+
| `SpringOptions` | `to`, `stiffness`, `damping`, `mass`, `precision?`, `onUpdate`, `onEnded` |
|
|
681
|
+
| `SmoothDampOptions` | `to`, `smoothTimeMs`, `maxSpeed?`, `precision?`, `onUpdate`, `onEnded` |
|
|
682
|
+
| `LerpOptions` | `to`, `smoothTimeMs`, `precision?`, `onUpdate`, `onEnded` |
|
|
683
|
+
| `RgbaTuple` | `readonly [number, number, number, number]` |
|
|
684
|
+
| `TickerControls` | `start`, `stop`, `update`, `add`, `remove` |
|
|
685
685
|
|
|
686
686
|
## License
|
|
687
687
|
|
|
@@ -13,12 +13,12 @@ export type Keyframe = {
|
|
|
13
13
|
ease?: EaseName | EaseFunction;
|
|
14
14
|
gap?: DynamicValue;
|
|
15
15
|
};
|
|
16
|
-
export type
|
|
16
|
+
export type KeyframeAnimationOptions = {
|
|
17
17
|
keyframes: Keyframe[];
|
|
18
18
|
onStarted?: () => void;
|
|
19
19
|
onUpdate?: (value: number, velocity: number) => void;
|
|
20
20
|
onProgress?: (progress: number) => void;
|
|
21
21
|
onEnded?: () => void;
|
|
22
22
|
};
|
|
23
|
-
export type AnimationOptions = SingleTweenOptions |
|
|
23
|
+
export type AnimationOptions = SingleTweenOptions | KeyframeAnimationOptions;
|
|
24
24
|
export declare const createAnimation: (options: AnimationOptions) => Animation;
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export { createSmoothClamp } from './smooth-clamp/smooth-clamp';
|
|
|
7
7
|
export { lerpOklab, hexToRgba } from './color/lerp-oklab';
|
|
8
8
|
export { getTicker } from './ticker/get-ticker';
|
|
9
9
|
export { EASE_NAMES, cubicBezier } from './easing/easing';
|
|
10
|
-
export type { Keyframe, AnimationOptions } from './animation/create-animation';
|
|
10
|
+
export type { Keyframe, AnimationOptions, KeyframeAnimationOptions, } from './animation/create-animation';
|
|
11
11
|
export type { Animation, Interpolation, EaseName, AnimationStatus, InterpolationStatus, DynamicValue, } from './shared/types';
|
|
12
12
|
export type { SpringOptions } from './spring/create-spring';
|
|
13
13
|
export type { SmoothDampOptions } from './smooth-damp/create-smooth-damp';
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { KeyframeAnimationOptions } from '../animation/create-animation';
|
|
2
2
|
import { AnimationStatus, DynamicValue } from '../shared/types';
|
|
3
3
|
export type TimelineLayer = {
|
|
4
|
-
animation:
|
|
4
|
+
animation: KeyframeAnimationOptions;
|
|
5
5
|
at: DynamicValue;
|
|
6
6
|
} | {
|
|
7
|
-
animation:
|
|
7
|
+
animation: KeyframeAnimationOptions;
|
|
8
8
|
gap: number;
|
|
9
9
|
};
|
|
10
10
|
export type Timeline = {
|