coily 0.15.0 → 0.16.0
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 +131 -55
- package/dist/{config-OOMMRdK8.d.ts → config-B8M2xp26.d.ts} +103 -120
- package/dist/css.d.ts +85 -57
- package/dist/css.js +58 -34
- package/dist/index.d.ts +3 -3
- package/dist/index.js +98 -65
- package/dist/nuxt.d.ts +20 -19
- package/dist/nuxt.js +15 -5
- package/dist/{solver-CVXOTDkZ.js → solver-CAXuxdKj.js} +22 -14
- package/dist/system-C7PbI4L0.d.ts +1213 -0
- package/dist/{system-Br_cPnaN.js → system-WejqGkfv.js} +1948 -1216
- package/dist/vue.d.ts +224 -129
- package/dist/vue.js +161 -41
- package/package.json +1 -1
- package/dist/system-Du_fXXmO.d.ts +0 -940
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
//#region src/config.d.ts
|
|
2
2
|
/**
|
|
3
3
|
* A spring's instantaneous motion, measured relative to its target.
|
|
4
|
-
* `SpringDefinition.computeTimeRemaining` takes one
|
|
4
|
+
* `SpringDefinition.computeTimeRemaining` takes one. Build it from a live
|
|
5
5
|
* spring as `{ position: spring.value - spring.target, velocity: spring.velocity }`.
|
|
6
6
|
*/
|
|
7
7
|
interface SpringState {
|
|
@@ -13,31 +13,34 @@ interface SpringState {
|
|
|
13
13
|
interface BaseOptions {
|
|
14
14
|
/**
|
|
15
15
|
* Decimal places of the resting threshold. A spring rests once its
|
|
16
|
-
* remaining motion
|
|
17
|
-
*
|
|
16
|
+
* remaining motion fits within `0.5 * 10^-precision` (0.005 at the
|
|
17
|
+
* default). Values are never rounded.
|
|
18
18
|
*
|
|
19
|
-
*
|
|
19
|
+
* Duration configs are tuned against this threshold, so they rest at
|
|
20
|
+
* their `duration` at any precision. See
|
|
20
21
|
* https://github.com/tkofh/coily/blob/main/PRECISION.md.
|
|
21
22
|
*
|
|
22
23
|
* @default 2
|
|
23
24
|
*/
|
|
24
25
|
readonly precision?: number | undefined;
|
|
25
26
|
/**
|
|
26
|
-
*
|
|
27
|
-
* multiplier applied to the velocity at every crossing.
|
|
27
|
+
* Velocity multiplier applied each time the value crosses the target.
|
|
28
28
|
*
|
|
29
|
-
* - `'passthrough'`
|
|
30
|
-
*
|
|
31
|
-
* - `'stop'`
|
|
32
|
-
*
|
|
29
|
+
* - `'passthrough'` (1) leaves the motion alone. The value swings
|
|
30
|
+
* through the target and settles as its damping allows.
|
|
31
|
+
* - `'stop'` (0) ends the motion at the first crossing, with no
|
|
32
|
+
* overshoot however bouncy the config.
|
|
33
33
|
* - A number between -1 and 1 sets the multiplier directly. Negative
|
|
34
|
-
* values rebound
|
|
35
|
-
*
|
|
36
|
-
* slowed.
|
|
34
|
+
* values rebound. `-0.75` reverses at three quarters speed on every
|
|
35
|
+
* return. Values between 0 and 1 pass through slower.
|
|
37
36
|
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
37
|
+
* A motion that never crosses ignores `arrival`. With `dampingRatio` 1
|
|
38
|
+
* or above (`bounce` 0 or below), a spring retargeted from rest closes
|
|
39
|
+
* in from one side. It crosses only when it starts with enough velocity
|
|
40
|
+
* toward the target, or when the target moves past it.
|
|
41
|
+
*
|
|
42
|
+
* Crossings are solved exactly, never sampled per frame, so `'stop'`
|
|
43
|
+
* lands exactly on the target at any frame timing. See
|
|
41
44
|
* https://github.com/tkofh/coily/blob/main/PRECISION.md.
|
|
42
45
|
*
|
|
43
46
|
* @default 'passthrough'
|
|
@@ -53,10 +56,7 @@ interface WithMass {
|
|
|
53
56
|
readonly mass?: number | undefined;
|
|
54
57
|
}
|
|
55
58
|
interface WithoutMass {
|
|
56
|
-
/**
|
|
57
|
-
* Mass is derived from the other parameters in this input shape
|
|
58
|
-
* and cannot be provided.
|
|
59
|
-
*/
|
|
59
|
+
/** Derived from the other parameters in this input shape. Cannot be provided. */
|
|
60
60
|
readonly mass?: undefined;
|
|
61
61
|
}
|
|
62
62
|
interface WithTension {
|
|
@@ -68,47 +68,48 @@ interface WithTension {
|
|
|
68
68
|
}
|
|
69
69
|
interface WithDamping {
|
|
70
70
|
/**
|
|
71
|
-
* Friction strength. Higher damping
|
|
72
|
-
* reduces bounce
|
|
71
|
+
* Friction strength. Higher damping removes velocity faster and
|
|
72
|
+
* reduces bounce. At 0 the spring oscillates forever. Must be greater
|
|
73
73
|
* than or equal to 0.
|
|
74
74
|
*/
|
|
75
75
|
readonly damping: number;
|
|
76
76
|
}
|
|
77
77
|
interface WithDampingRatio {
|
|
78
78
|
/**
|
|
79
|
-
* Damping as a fraction of critical damping
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
* Above 1 it settles slower, still
|
|
83
|
-
*
|
|
79
|
+
* Damping as a fraction of critical damping, the friction at which
|
|
80
|
+
* bounce disappears. It sets the motion's character independent of its
|
|
81
|
+
* speed. Below 1 the spring bounces, and at 0 it never settles. At 1 it
|
|
82
|
+
* settles fastest without overshooting. Above 1 it settles slower, still
|
|
83
|
+
* without overshooting. Must be greater than or equal to 0.
|
|
84
84
|
*/
|
|
85
85
|
readonly dampingRatio: number;
|
|
86
86
|
}
|
|
87
87
|
interface WithBounce {
|
|
88
88
|
/**
|
|
89
89
|
* Bounciness, converted to a damping ratio as `1 - bounce`. 0 settles
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
* the spring still settles.
|
|
93
|
-
*
|
|
90
|
+
* fastest without overshooting. Positive values bounce. Negative values
|
|
91
|
+
* settle slower without bouncing. At 1 the ratio clamps just short of
|
|
92
|
+
* undamped, so the spring still settles. Must be between -1 and 1, and
|
|
93
|
+
* below 1 in a config that sets `damping` without `duration`.
|
|
94
94
|
*/
|
|
95
95
|
readonly bounce: number;
|
|
96
96
|
}
|
|
97
97
|
interface WithDuration {
|
|
98
98
|
/**
|
|
99
|
-
* Settle time in
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
99
|
+
* Settle time in ms. Starting `displacement` away from the target, the
|
|
100
|
+
* spring rests within a frame of it at any `precision`. A bouncy config
|
|
101
|
+
* can rest earlier, by up to about one oscillation (several short ones
|
|
102
|
+
* when `bounce` is near 1). Must be greater than 0.
|
|
103
103
|
*/
|
|
104
104
|
readonly duration: number;
|
|
105
105
|
}
|
|
106
106
|
interface WithDisplacement {
|
|
107
107
|
/**
|
|
108
|
-
* The
|
|
109
|
-
* animation's range
|
|
110
|
-
*
|
|
111
|
-
*
|
|
108
|
+
* The starting distance from the target that the `duration` tuning
|
|
109
|
+
* assumes. Set it to your animation's range (300 when animating 0 to
|
|
110
|
+
* 300). Timing drifts as the real distance departs from it. The sign is
|
|
111
|
+
* ignored. The magnitude must exceed the resting threshold,
|
|
112
|
+
* `0.5 * 10^-precision`.
|
|
112
113
|
* @default 1
|
|
113
114
|
*/
|
|
114
115
|
readonly displacement?: number | undefined;
|
|
@@ -129,23 +130,21 @@ interface DampingBounceDurationOptions extends BaseOptions, WithoutMass, WithDam
|
|
|
129
130
|
/** Every option key accepted by at least one `defineSpring` input shape. */
|
|
130
131
|
type SpringOptionKeys = 'mass' | 'tension' | 'damping' | 'dampingRatio' | 'bounce' | 'duration' | 'displacement' | 'precision' | 'arrival';
|
|
131
132
|
/**
|
|
132
|
-
* Marks every option key foreign to `T` as
|
|
133
|
-
*
|
|
134
|
-
* silently resolving to an unintended shape at runtime.
|
|
133
|
+
* Marks every option key foreign to `T` as absent or undefined, so mixing
|
|
134
|
+
* keys from different input shapes fails to type-check.
|
|
135
135
|
*/
|
|
136
136
|
type Exact<T> = T & { [K in Exclude<SpringOptionKeys, keyof T>]?: undefined; };
|
|
137
137
|
/**
|
|
138
138
|
* Every input `defineSpring` accepts: one of the documented parameter
|
|
139
|
-
* combinations,
|
|
140
|
-
* don't mix.
|
|
139
|
+
* combinations, with no keys mixed in from another.
|
|
141
140
|
*/
|
|
142
141
|
type SpringDefinitionOptions = Exact<DirectOptions> | Exact<TensionRatioOptions> | Exact<TensionBounceOptions> | Exact<DampingRatioOptions> | Exact<DampingBounceOptions> | Exact<TensionDampingRatioOptions> | Exact<TensionDampingBounceOptions> | Exact<DurationOptions> | Exact<BounceDurationOptions> | Exact<TensionDurationOptions> | Exact<TensionBounceDurationOptions> | Exact<DampingDurationOptions> | Exact<DampingBounceDurationOptions>;
|
|
143
142
|
/**
|
|
144
|
-
*
|
|
145
|
-
* shape produced it, a config
|
|
146
|
-
* `damping`, and `
|
|
147
|
-
*
|
|
148
|
-
*
|
|
143
|
+
* Resolved spring parameters, frozen and safe to share between springs.
|
|
144
|
+
* Whatever `defineSpring` input shape produced it, a config has concrete
|
|
145
|
+
* `mass`, `tension`, `damping`, `precision`, and `arrival`, plus the
|
|
146
|
+
* quantities derived from them. To change a spring's behavior, assign a
|
|
147
|
+
* new config to `spring.config`.
|
|
149
148
|
*/
|
|
150
149
|
declare class SpringDefinition {
|
|
151
150
|
/** The config for springs created without one: critically damped, settling in about 500ms. */
|
|
@@ -156,13 +155,13 @@ declare class SpringDefinition {
|
|
|
156
155
|
readonly tension: number;
|
|
157
156
|
/** Friction strength, as provided or derived. */
|
|
158
157
|
readonly damping: number;
|
|
159
|
-
/** Decimal places of the resting threshold
|
|
158
|
+
/** Decimal places of the resting threshold. See `restingMagnitude`. */
|
|
160
159
|
readonly precision: number;
|
|
161
160
|
/**
|
|
162
|
-
* Velocity multiplier applied
|
|
163
|
-
*
|
|
164
|
-
*
|
|
165
|
-
*
|
|
161
|
+
* Velocity multiplier applied each time the value crosses the target.
|
|
162
|
+
* `'passthrough'` resolves to 1, which leaves the motion untouched.
|
|
163
|
+
* `'stop'` resolves to 0, which ends it at the target. Negative values
|
|
164
|
+
* rebound.
|
|
166
165
|
*/
|
|
167
166
|
readonly arrival: number;
|
|
168
167
|
/** Oscillation rate with no damping: `sqrt(tension / mass)`, in radians per second. */
|
|
@@ -170,39 +169,33 @@ declare class SpringDefinition {
|
|
|
170
169
|
/** The damping at which bounce disappears: `2 * mass * naturalFrequency`. */
|
|
171
170
|
readonly criticalDamping: number;
|
|
172
171
|
/**
|
|
173
|
-
* `damping / criticalDamping`. Below 1 the spring
|
|
174
|
-
*
|
|
175
|
-
* settles slower.
|
|
172
|
+
* `damping / criticalDamping`. Below 1 the spring bounces. At 1 it
|
|
173
|
+
* settles fastest without overshooting. Above 1 it settles slower.
|
|
176
174
|
*/
|
|
177
175
|
readonly dampingRatio: number;
|
|
178
|
-
/** Resting threshold in value units
|
|
176
|
+
/** Resting threshold in value units, `0.5 * 10^-precision`. */
|
|
179
177
|
readonly restingMagnitude: number;
|
|
180
178
|
constructor(input: SpringDefinitionOptions);
|
|
181
179
|
/**
|
|
182
|
-
* Computes
|
|
183
|
-
*
|
|
180
|
+
* Computes the time in ms until a spring with this config rests from
|
|
181
|
+
* `state`, solved exactly from the motion's decay bound. The spring
|
|
182
|
+
* rests at the first tick at or after it.
|
|
184
183
|
*
|
|
185
|
-
*
|
|
186
|
-
*
|
|
187
|
-
*
|
|
188
|
-
*
|
|
189
|
-
* rests there — so read the value as "no later than", tight in
|
|
190
|
-
* practice. See
|
|
191
|
-
* https://github.com/tkofh/coily/blob/main/PRECISION.md.
|
|
184
|
+
* An underdamped spring can also rest earlier, on a frame that samples
|
|
185
|
+
* a dip in its pulsing rest amplitude, so read the result as "no later
|
|
186
|
+
* than". The motion an early rest cuts off never leaves the resting
|
|
187
|
+
* threshold. See https://github.com/tkofh/coily/blob/main/PRECISION.md.
|
|
192
188
|
*
|
|
193
189
|
* Returns 0 when `state` is already inside the resting threshold.
|
|
194
|
-
* Returns Infinity when the motion never settles: a `dampingRatio` of
|
|
195
|
-
*
|
|
196
|
-
*
|
|
197
|
-
*
|
|
198
|
-
*
|
|
190
|
+
* Returns Infinity when the motion never settles: a `dampingRatio` of 0
|
|
191
|
+
* whose `arrival` neither stops nor slows it. With `arrival` 0, the
|
|
192
|
+
* result is capped at the first target crossing, where the spring rests
|
|
193
|
+
* exactly. Other multipliers fold their per-crossing velocity loss into
|
|
194
|
+
* the time.
|
|
199
195
|
*/
|
|
200
196
|
computeTimeRemaining(state: SpringState): number;
|
|
201
197
|
}
|
|
202
|
-
/**
|
|
203
|
-
* Creates a config from direct physical parameters: you set stiffness
|
|
204
|
-
* and friction exactly.
|
|
205
|
-
*/
|
|
198
|
+
/** Creates a config with stiffness (`tension`) and friction (`damping`) set directly. */
|
|
206
199
|
declare function defineSpring(input: Exact<DirectOptions>): SpringDefinition;
|
|
207
200
|
/**
|
|
208
201
|
* Creates a config from stiffness and motion character. Damping is
|
|
@@ -217,95 +210,85 @@ declare function defineSpring(input: Exact<TensionRatioOptions>): SpringDefiniti
|
|
|
217
210
|
declare function defineSpring(input: Exact<TensionBounceOptions>): SpringDefinition;
|
|
218
211
|
/**
|
|
219
212
|
* Creates a config from friction and motion character. Tension is
|
|
220
|
-
* derived as `damping^2 / (4 * dampingRatio^2 * mass)
|
|
213
|
+
* derived as `damping^2 / (4 * dampingRatio^2 * mass)`. `dampingRatio`
|
|
221
214
|
* must be greater than 0.
|
|
222
215
|
*/
|
|
223
216
|
declare function defineSpring(input: Exact<DampingRatioOptions>): SpringDefinition;
|
|
224
217
|
/**
|
|
225
|
-
* Creates a config from friction and bounciness
|
|
226
|
-
*
|
|
218
|
+
* Creates a config from friction and bounciness, deriving tension.
|
|
219
|
+
* `bounce` must be less than 1, since the derived tension grows without
|
|
220
|
+
* limit as it nears 1.
|
|
227
221
|
*/
|
|
228
222
|
declare function defineSpring(input: Exact<DampingBounceOptions>): SpringDefinition;
|
|
229
223
|
/**
|
|
230
|
-
* Creates a config from all three physical
|
|
231
|
-
* `damping^2 / (4 * dampingRatio^2 * tension)` and cannot be
|
|
232
|
-
* `dampingRatio` must be greater than 0.
|
|
224
|
+
* Creates a config from all three physical parameters. Mass is derived
|
|
225
|
+
* as `damping^2 / (4 * dampingRatio^2 * tension)` and cannot be
|
|
226
|
+
* provided. `dampingRatio` must be greater than 0.
|
|
233
227
|
*/
|
|
234
228
|
declare function defineSpring(input: Exact<TensionDampingRatioOptions>): SpringDefinition;
|
|
235
229
|
/**
|
|
236
|
-
* Creates a config from
|
|
237
|
-
*
|
|
238
|
-
*
|
|
230
|
+
* Creates a config from tension, damping, and bounce. Mass is derived and
|
|
231
|
+
* cannot be provided. `bounce` must be less than 1, since the derived
|
|
232
|
+
* mass grows without limit as it nears 1.
|
|
239
233
|
*/
|
|
240
234
|
declare function defineSpring(input: Exact<TensionDampingBounceOptions>): SpringDefinition;
|
|
241
235
|
/**
|
|
242
|
-
* Tunes the spring to rest at `duration`
|
|
243
|
-
* `dampingRatio`
|
|
244
|
-
*
|
|
236
|
+
* Tunes the spring to rest at `duration` ms, deriving tension and
|
|
237
|
+
* damping. `dampingRatio` sets the motion's character and must be
|
|
238
|
+
* greater than 0.
|
|
245
239
|
*
|
|
246
240
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
247
|
-
* from the target
|
|
248
|
-
* for accurate timing.
|
|
241
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
249
242
|
*
|
|
250
243
|
* @example
|
|
251
244
|
* ```ts
|
|
252
|
-
* // Tuned for a 300px move
|
|
245
|
+
* // Tuned for a 300px move. Rests within 750ms.
|
|
253
246
|
* defineSpring({ duration: 750, dampingRatio: 1, displacement: 300 })
|
|
254
247
|
* ```
|
|
255
248
|
*/
|
|
256
249
|
declare function defineSpring(input: Exact<DurationOptions>): SpringDefinition;
|
|
257
250
|
/**
|
|
258
|
-
* Tunes the spring to rest at `duration`
|
|
259
|
-
* `bounce`
|
|
260
|
-
* damping are both derived.
|
|
251
|
+
* Tunes the spring to rest at `duration` ms, deriving tension and
|
|
252
|
+
* damping. `bounce` sets how oscillatory the settling motion is.
|
|
261
253
|
*
|
|
262
254
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
263
|
-
* from the target
|
|
264
|
-
* for accurate timing.
|
|
255
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
265
256
|
*/
|
|
266
257
|
declare function defineSpring(input: Exact<BounceDurationOptions>): SpringDefinition;
|
|
267
258
|
/**
|
|
268
|
-
* Tunes a spring of the given stiffness to rest at `duration`
|
|
269
|
-
*
|
|
270
|
-
*
|
|
271
|
-
* provided.
|
|
259
|
+
* Tunes a spring of the given stiffness to rest at `duration` ms. Mass is
|
|
260
|
+
* derived to meet the timing, then damping from mass and `dampingRatio`.
|
|
261
|
+
* Mass cannot be provided, and `dampingRatio` must be greater than 0.
|
|
272
262
|
*
|
|
273
263
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
274
|
-
* from the target
|
|
275
|
-
* for accurate timing.
|
|
264
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
276
265
|
*/
|
|
277
266
|
declare function defineSpring(input: Exact<TensionDurationOptions>): SpringDefinition;
|
|
278
267
|
/**
|
|
279
|
-
* Tunes a spring of the given stiffness to rest at `duration`
|
|
280
|
-
*
|
|
281
|
-
*
|
|
282
|
-
* and cannot be provided.
|
|
268
|
+
* Tunes a spring of the given stiffness to rest at `duration` ms, with
|
|
269
|
+
* `bounce` setting how oscillatory the settling motion is. Mass is
|
|
270
|
+
* derived to meet the timing and cannot be provided.
|
|
283
271
|
*
|
|
284
272
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
285
|
-
* from the target
|
|
286
|
-
* for accurate timing.
|
|
273
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
287
274
|
*/
|
|
288
275
|
declare function defineSpring(input: Exact<TensionBounceDurationOptions>): SpringDefinition;
|
|
289
276
|
/**
|
|
290
|
-
* Tunes a spring of the given friction to rest at `duration`
|
|
291
|
-
*
|
|
292
|
-
*
|
|
293
|
-
* provided.
|
|
277
|
+
* Tunes a spring of the given friction to rest at `duration` ms. Mass is
|
|
278
|
+
* derived to meet the timing, then tension from mass. Mass cannot be
|
|
279
|
+
* provided, and `dampingRatio` must be greater than 0.
|
|
294
280
|
*
|
|
295
281
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
296
|
-
* from the target
|
|
297
|
-
* for accurate timing.
|
|
282
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
298
283
|
*/
|
|
299
284
|
declare function defineSpring(input: Exact<DampingDurationOptions>): SpringDefinition;
|
|
300
285
|
/**
|
|
301
|
-
* Tunes a spring of the given friction to rest at `duration`
|
|
302
|
-
*
|
|
303
|
-
*
|
|
304
|
-
* and cannot be provided.
|
|
286
|
+
* Tunes a spring of the given friction to rest at `duration` ms, with
|
|
287
|
+
* `bounce` setting how oscillatory the settling motion is. Mass is
|
|
288
|
+
* derived to meet the timing and cannot be provided.
|
|
305
289
|
*
|
|
306
290
|
* The timing assumes the motion starts `displacement` (default 1) away
|
|
307
|
-
* from the target
|
|
308
|
-
* for accurate timing.
|
|
291
|
+
* from the target. Pass your animation's range for accurate timing.
|
|
309
292
|
*/
|
|
310
293
|
declare function defineSpring(input: Exact<DampingBounceDurationOptions>): SpringDefinition;
|
|
311
294
|
//#endregion
|
package/dist/css.d.ts
CHANGED
|
@@ -1,23 +1,27 @@
|
|
|
1
|
-
import { r as SpringState, t as SpringDefinition } from "./config-
|
|
1
|
+
import { r as SpringState, t as SpringDefinition } from "./config-B8M2xp26.js";
|
|
2
2
|
//#region src/css.d.ts
|
|
3
3
|
interface LinearEasingOptions {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
5
|
+
* The size of the move the easing is timed for, in value units. A larger
|
|
6
|
+
* move takes longer to come within the fixed rest threshold, so it gets a
|
|
7
|
+
* longer duration, different `linear()` stop percentages, and possibly a
|
|
8
|
+
* different stop count. The keyframe helpers (`springToWaapi`,
|
|
9
|
+
* `springToCss`, `springToTransition`) default it to the largest move
|
|
10
|
+
* among their specs.
|
|
10
11
|
* @default 1
|
|
11
12
|
*/
|
|
12
13
|
readonly displacement?: number;
|
|
13
14
|
/**
|
|
14
|
-
*
|
|
15
|
-
* units (0
|
|
15
|
+
* The largest output error allowed in the piecewise-linear
|
|
16
|
+
* approximation, in progress units (0 at the start, 1 at the target). A
|
|
17
|
+
* smaller value keeps more stops.
|
|
16
18
|
* @default 0.0025
|
|
17
19
|
*/
|
|
18
20
|
readonly maxError?: number;
|
|
19
21
|
/**
|
|
20
|
-
*
|
|
22
|
+
* The longest duration to generate, in ms. It cuts off configs with so
|
|
23
|
+
* little damping (friction) that they take very long to settle. A
|
|
24
|
+
* `'loop'` easing ignores the cap and lasts one half period.
|
|
21
25
|
* @default 10000
|
|
22
26
|
*/
|
|
23
27
|
readonly maxDuration?: number;
|
|
@@ -29,7 +33,7 @@ interface EasingBase {
|
|
|
29
33
|
readonly duration: number;
|
|
30
34
|
/** Number of stops in the easing (diagnostic). */
|
|
31
35
|
readonly stops: number;
|
|
32
|
-
/**
|
|
36
|
+
/** The largest error of `easing` against the dense samples (diagnostic). */
|
|
33
37
|
readonly maxError: number;
|
|
34
38
|
}
|
|
35
39
|
/** The easing of a spring that comes to rest: play it once over `duration`. */
|
|
@@ -37,11 +41,11 @@ interface SettlingEasing extends EasingBase {
|
|
|
37
41
|
readonly mode: 'settle';
|
|
38
42
|
}
|
|
39
43
|
/**
|
|
40
|
-
* The easing of a spring that never rests
|
|
41
|
-
* expressed as
|
|
42
|
-
* swing extremes
|
|
43
|
-
* midpoint
|
|
44
|
-
* `animation-direction: alternate`. `duration` is one half period.
|
|
44
|
+
* The easing of a spring that never rests: an undamped oscillation (no
|
|
45
|
+
* friction), expressed as an infinite loop. Animate the property between
|
|
46
|
+
* its two swing extremes, `from` and `2 * target - from`, with the target
|
|
47
|
+
* at the 50% midpoint. Use `animation-iteration-count: infinite` and
|
|
48
|
+
* `animation-direction: alternate`. `duration` is one half period, in ms.
|
|
45
49
|
*/
|
|
46
50
|
interface LoopingEasing extends EasingBase {
|
|
47
51
|
readonly mode: 'loop';
|
|
@@ -50,57 +54,62 @@ interface LoopingEasing extends EasingBase {
|
|
|
50
54
|
}
|
|
51
55
|
type LinearEasing = SettlingEasing | LoopingEasing;
|
|
52
56
|
/**
|
|
53
|
-
* Turns a
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
57
|
+
* Turns a spring config into a CSS `linear()` easing and the duration in
|
|
58
|
+
* ms to pair it with. A settling config returns a `'settle'` easing. A
|
|
59
|
+
* pure undamped config (`dampingRatio: 0` with passthrough `arrival`)
|
|
60
|
+
* never settles and returns a `'loop'` easing for an infinite alternating
|
|
61
|
+
* animation. Any other config that never settles, such as
|
|
62
|
+
* `dampingRatio: 0` with `arrival: -1`, returns a `'settle'` easing cut
|
|
63
|
+
* off at `maxDuration`.
|
|
58
64
|
*/
|
|
59
65
|
declare function springToLinear(config: SpringDefinition, options?: LinearEasingOptions): LinearEasing;
|
|
60
66
|
/**
|
|
61
|
-
* Like `springToLinear`, but
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
* velocity), so this is computed per interruption, not cached per config.
|
|
67
|
+
* Like `springToLinear`, but for a spring caught mid-flight. `state`
|
|
68
|
+
* carries the displacement from the target (`position`) and the current
|
|
69
|
+
* `velocity`, so the easing continues the motion instead of restarting it.
|
|
70
|
+
* Use it to regenerate an animation when its target changes. The curve
|
|
71
|
+
* depends on the velocity, so compute it per interruption instead of
|
|
72
|
+
* caching it per config.
|
|
68
73
|
*
|
|
69
|
-
*
|
|
74
|
+
* The result is always a `'settle'` easing, timed from `position`, so
|
|
75
|
+
* `options.displacement` is ignored. A config that never settles is cut
|
|
76
|
+
* off at `maxDuration`. Throws when `position` is 0 (within 1e-9), even if
|
|
77
|
+
* `velocity` is not.
|
|
70
78
|
*/
|
|
71
79
|
declare function springFromState(config: SpringDefinition, state: SpringState, options?: LinearEasingOptions): LinearEasing;
|
|
72
80
|
/**
|
|
73
|
-
*
|
|
74
|
-
* displacement and velocity.
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
81
|
+
* Advances a spring `state` by `elapsedMs` ms and returns the new
|
|
82
|
+
* displacement and velocity. `elapsedMs <= 0` returns a copy of `state`.
|
|
83
|
+
*
|
|
84
|
+
* The Web Animations API doesn't expose velocity, so to interrupt a running
|
|
85
|
+
* `element.animate`, advance the state it started from by its `currentTime`
|
|
86
|
+
* and hand the result to `springFromState`.
|
|
78
87
|
*/
|
|
79
88
|
declare function springStateAt(config: SpringDefinition, state: SpringState, elapsedMs: number): SpringState;
|
|
80
89
|
/** What to animate: a CSS property from one numeric value to another. */
|
|
81
90
|
interface PropertySpec {
|
|
82
|
-
/** The CSS property,
|
|
91
|
+
/** The CSS property, for example `'opacity'`, `'transform'`, or `'translate'`. */
|
|
83
92
|
readonly property: string;
|
|
84
|
-
/**
|
|
93
|
+
/** The start value. */
|
|
85
94
|
readonly from: number;
|
|
86
|
-
/**
|
|
95
|
+
/** The target value. */
|
|
87
96
|
readonly to: number;
|
|
88
97
|
/**
|
|
89
|
-
* Unit appended to numbers,
|
|
98
|
+
* Unit appended to numbers, for example `'px'`, `'%'`, or `'deg'`.
|
|
90
99
|
* @default ''
|
|
91
100
|
*/
|
|
92
101
|
readonly unit?: string;
|
|
93
102
|
/**
|
|
94
103
|
* Formats an interpolated number into a property value, overriding
|
|
95
|
-
* `unit
|
|
104
|
+
* `unit`. Use it for values that wrap the number, such as
|
|
105
|
+
* ``(v) => `translateX(${v}px)` ``.
|
|
96
106
|
*/
|
|
97
107
|
readonly format?: (value: number) => string;
|
|
98
108
|
/**
|
|
99
109
|
* The property's current velocity, in its units per second. Set it to
|
|
100
|
-
* regenerate an interrupted animation
|
|
101
|
-
*
|
|
102
|
-
*
|
|
103
|
-
* shared across properties.
|
|
110
|
+
* regenerate an interrupted animation with its momentum instead of from
|
|
111
|
+
* rest. A spec with a nonzero velocity must be the only spec in the call,
|
|
112
|
+
* or the call throws.
|
|
104
113
|
*/
|
|
105
114
|
readonly velocity?: number;
|
|
106
115
|
}
|
|
@@ -115,7 +124,7 @@ interface CssOptions extends LinearEasingOptions {
|
|
|
115
124
|
* Builds arguments for `element.animate(keyframes, options)`: two keyframes
|
|
116
125
|
* carrying the endpoint values, and options carrying the spring's `linear()`
|
|
117
126
|
* easing and duration. Pass an array of specs to drive several properties
|
|
118
|
-
* from one spring. A settling spring fills forwards
|
|
127
|
+
* from one spring. A settling spring fills forwards. An undamped one repeats
|
|
119
128
|
* infinitely in alternating directions.
|
|
120
129
|
*
|
|
121
130
|
* @example
|
|
@@ -134,10 +143,11 @@ declare function springToWaapi(config: SpringDefinition, spec: PropertySpec | Pr
|
|
|
134
143
|
options: KeyframeAnimationOptions;
|
|
135
144
|
};
|
|
136
145
|
/**
|
|
137
|
-
* Builds CSS text for the animation: a `@keyframes` rule
|
|
138
|
-
*
|
|
139
|
-
*
|
|
140
|
-
*
|
|
146
|
+
* Builds CSS text for the animation: a `@keyframes` rule named by `name`
|
|
147
|
+
* (default `'coily'`) and an `animation` shorthand value that references
|
|
148
|
+
* it, driving one property or several from one spring. A settling spring
|
|
149
|
+
* fills forwards. An undamped one repeats infinitely in alternating
|
|
150
|
+
* directions.
|
|
141
151
|
*
|
|
142
152
|
* @example
|
|
143
153
|
* ```ts
|
|
@@ -158,17 +168,35 @@ declare function springToCss(config: SpringDefinition, spec: PropertySpec | Prop
|
|
|
158
168
|
animation: string;
|
|
159
169
|
};
|
|
160
170
|
/**
|
|
161
|
-
* Builds a CSS `transition` value that
|
|
162
|
-
* the element, then change the property
|
|
163
|
-
*
|
|
164
|
-
*
|
|
171
|
+
* Builds a CSS `transition` value that animates a property change with the
|
|
172
|
+
* spring. Set it on the element, then change the property, for example on
|
|
173
|
+
* `:hover`, with a toggled class, or with a state attribute. Pass several
|
|
174
|
+
* specs to build one `transition` for several properties.
|
|
175
|
+
*
|
|
176
|
+
* The values come from your CSS rules. Each spec's `from` and `to` only
|
|
177
|
+
* size the move, which tunes the duration. An undamped (looping) config
|
|
178
|
+
* throws, because a transition cannot loop.
|
|
179
|
+
*
|
|
180
|
+
* A transition starts from rest unless its spec carries a `velocity`, in
|
|
181
|
+
* the property's units per second, such as a drag's speed at release. The
|
|
182
|
+
* velocity reshapes the curve and the duration, so build the transition at
|
|
183
|
+
* the handoff. A spec with a velocity must be the only spec in the call.
|
|
184
|
+
*
|
|
185
|
+
* ```ts
|
|
186
|
+
* // Release a dragged card back to 0 at the drag's speed.
|
|
187
|
+
* card.style.transition = springToTransition(config, {
|
|
188
|
+
* property: 'translate',
|
|
189
|
+
* from: dragX,
|
|
190
|
+
* to: 0,
|
|
191
|
+
* velocity: releaseVelocity,
|
|
192
|
+
* })
|
|
193
|
+
* card.style.translate = '0px'
|
|
194
|
+
* ```
|
|
165
195
|
*
|
|
166
|
-
*
|
|
167
|
-
*
|
|
168
|
-
*
|
|
169
|
-
*
|
|
170
|
-
* specs' `from`/`to` only tune the duration; the actual values live in your
|
|
171
|
-
* CSS rules.
|
|
196
|
+
* The browser carries no momentum between transitions, so a change that
|
|
197
|
+
* interrupts one mid-flight stalls at the turn. To keep the momentum, read
|
|
198
|
+
* the velocity with `springStateAt` and rebuild the transition with it.
|
|
199
|
+
* For motion that reverses often, drive a live `Spring` instead.
|
|
172
200
|
*/
|
|
173
201
|
declare function springToTransition(config: SpringDefinition, spec: PropertySpec | PropertySpec[], options?: LinearEasingOptions): string;
|
|
174
202
|
//#endregion
|