-
Notifications
You must be signed in to change notification settings - Fork 785
/
types.ts
158 lines (143 loc) · 3.79 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
import { TargetAndTransition, TargetResolver, Transition } from "../types"
import type { VisualElement } from "../render/VisualElement"
import { Driver } from "./legacy-popmotion/types"
import { Easing } from "../easing/types"
export interface VelocityOptions {
velocity?: number
restSpeed?: number
restDelta?: number
}
export interface AnimationLifecycleOptions<V> {
onUpdate?: (v: V) => void
onComplete?: VoidFunction
onPlay?: VoidFunction
onRepeat?: VoidFunction
onStop?: VoidFunction
}
export interface AnimationPlaybackOptions {
repeat?: number
repeatType?: "loop" | "reverse" | "mirror"
repeatDelay?: number
}
export interface DurationSpringOptions {
duration?: number
bounce?: number
}
export interface SpringOptions extends DurationSpringOptions, VelocityOptions {
stiffness?: number
damping?: number
mass?: number
}
export interface DecayOptions extends VelocityOptions {
keyframes?: number[]
power?: number
timeConstant?: number
modifyTarget?: (v: number) => number
}
export interface InertiaOptions extends DecayOptions {
bounceStiffness?: number
bounceDamping?: number
min?: number
max?: number
}
export interface KeyframeOptions {
ease?: Easing | Easing[]
times?: number[]
}
export interface AnimationOptions<V = any>
extends AnimationLifecycleOptions<V>,
AnimationPlaybackOptions,
Omit<SpringOptions, "keyframes">,
Omit<InertiaOptions, "keyframes">,
KeyframeOptions {
keyframes: V[]
elapsed?: number
driver?: Driver
type?: "decay" | "spring" | "keyframes" | "tween"
duration?: number
autoplay?: boolean
}
/**
* @public
*/
export type ControlsAnimationDefinition =
| string
| string[]
| TargetAndTransition
| TargetResolver
/**
* @public
*/
export type PendingAnimations = {
animation: [ControlsAnimationDefinition, Transition | undefined]
resolve: () => void
}
/**
* @public
*/
export interface AnimationControls {
/**
* Subscribes a component's animation controls to this.
*
* @param controls - The controls to subscribe
* @returns An unsubscribe function.
*
* @internal
*/
subscribe(visualElement: VisualElement): () => void
/**
* Starts an animation on all linked components.
*
* @remarks
*
* ```jsx
* controls.start("variantLabel")
* controls.start({
* x: 0,
* transition: { duration: 1 }
* })
* ```
*
* @param definition - Properties or variant label to animate to
* @param transition - Optional `transtion` to apply to a variant
* @returns - A `Promise` that resolves when all animations have completed.
*
* @public
*/
start(
definition: ControlsAnimationDefinition,
transitionOverride?: Transition
): Promise<any>
/**
* Instantly set to a set of properties or a variant.
*
* ```jsx
* // With properties
* controls.set({ opacity: 0 })
*
* // With variants
* controls.set("hidden")
* ```
*
* @privateRemarks
* We could perform a similar trick to `.start` where this can be called before mount
* and we maintain a list of of pending actions that get applied on mount. But the
* expectation of `set` is that it happens synchronously and this would be difficult
* to do before any children have even attached themselves. It's also poor practise
* and we should discourage render-synchronous `.start` calls rather than lean into this.
*
* @public
*/
set(definition: ControlsAnimationDefinition): void
/**
* Stops animations on all linked components.
*
* ```jsx
* controls.stop()
* ```
*
* @public
*/
stop(): void
mount(): () => void
}