1 | ;
|
2 |
|
3 | import { Bezier } from "./Bezier.js";
|
4 |
|
5 | /**
|
6 | * The `Easing` module implements common easing functions. This module is used
|
7 | * by [Animate.timing()](docs/animate.html#timing) to convey physically
|
8 | * believable motion in animations.
|
9 | *
|
10 | * You can find a visualization of some common easing functions at
|
11 | * http://easings.net/
|
12 | *
|
13 | * ### Predefined animations
|
14 | *
|
15 | * The `Easing` module provides several predefined animations through the
|
16 | * following methods:
|
17 | *
|
18 | * - [`back`](docs/easing.html#back) provides a simple animation where the object
|
19 | * goes slightly back before moving forward
|
20 | * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation
|
21 | * - [`ease`](docs/easing.html#ease) provides a simple inertial animation
|
22 | * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
|
23 | *
|
24 | * ### Standard functions
|
25 | *
|
26 | * Three standard easing functions are provided:
|
27 | *
|
28 | * - [`linear`](docs/easing.html#linear)
|
29 | * - [`quad`](docs/easing.html#quad)
|
30 | * - [`cubic`](docs/easing.html#cubic)
|
31 | *
|
32 | * The [`poly`](docs/easing.html#poly) function can be used to implement
|
33 | * quartic, quintic, and other higher power functions.
|
34 | *
|
35 | * ### Additional functions
|
36 | *
|
37 | * Additional mathematical functions are provided by the following methods:
|
38 | *
|
39 | * - [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
|
40 | * - [`circle`](docs/easing.html#circle) provides a circular function
|
41 | * - [`sin`](docs/easing.html#sin) provides a sinusoidal function
|
42 | * - [`exp`](docs/easing.html#exp) provides an exponential function
|
43 | *
|
44 | * The following helpers are used to modify other easing functions.
|
45 | *
|
46 | * - [`in`](docs/easing.html#in) runs an easing function forwards
|
47 | * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
|
48 | * - [`out`](docs/easing.html#out) runs an easing function backwards
|
49 | */
|
50 |
|
51 | /** @deprecated Please use {@link EasingFunction} type instead. */
|
52 |
|
53 | /** @deprecated Please use {@link EasingFunctionFactory} type instead. */
|
54 |
|
55 | /**
|
56 | * A linear function, `f(t) = t`. Position correlates to elapsed time one to
|
57 | * one.
|
58 | *
|
59 | * http://cubic-bezier.com/#0,0,1,1
|
60 | */
|
61 | function linear(t) {
|
62 | 'worklet';
|
63 |
|
64 | return t;
|
65 | }
|
66 |
|
67 | /**
|
68 | * A simple inertial interaction, similar to an object slowly accelerating to
|
69 | * speed.
|
70 | *
|
71 | * http://cubic-bezier.com/#.42,0,1,1
|
72 | */
|
73 | function ease(t) {
|
74 | 'worklet';
|
75 |
|
76 | return Bezier(0.42, 0, 1, 1)(t);
|
77 | }
|
78 |
|
79 | /**
|
80 | * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
|
81 | * time.
|
82 | *
|
83 | * http://easings.net/#easeInQuad
|
84 | */
|
85 | function quad(t) {
|
86 | 'worklet';
|
87 |
|
88 | return t * t;
|
89 | }
|
90 |
|
91 | /**
|
92 | * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
|
93 | * time.
|
94 | *
|
95 | * http://easings.net/#easeInCubic
|
96 | */
|
97 | function cubic(t) {
|
98 | 'worklet';
|
99 |
|
100 | return t * t * t;
|
101 | }
|
102 |
|
103 | /**
|
104 | * A power function. Position is equal to the Nth power of elapsed time.
|
105 | *
|
106 | * N = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint
|
107 | */
|
108 | function poly(n) {
|
109 | 'worklet';
|
110 |
|
111 | return t => {
|
112 | 'worklet';
|
113 |
|
114 | return Math.pow(t, n);
|
115 | };
|
116 | }
|
117 |
|
118 | /**
|
119 | * A sinusoidal function.
|
120 | *
|
121 | * http://easings.net/#easeInSine
|
122 | */
|
123 | function sin(t) {
|
124 | 'worklet';
|
125 |
|
126 | return 1 - Math.cos(t * Math.PI / 2);
|
127 | }
|
128 |
|
129 | /**
|
130 | * A circular function.
|
131 | *
|
132 | * http://easings.net/#easeInCirc
|
133 | */
|
134 | function circle(t) {
|
135 | 'worklet';
|
136 |
|
137 | return 1 - Math.sqrt(1 - t * t);
|
138 | }
|
139 |
|
140 | /**
|
141 | * An exponential function.
|
142 | *
|
143 | * http://easings.net/#easeInExpo
|
144 | */
|
145 | function exp(t) {
|
146 | 'worklet';
|
147 |
|
148 | return Math.pow(2, 10 * (t - 1));
|
149 | }
|
150 |
|
151 | /**
|
152 | * A simple elastic interaction, similar to a spring oscillating back and forth.
|
153 | *
|
154 | * Default bounciness is 1, which overshoots a little bit once. 0 bounciness
|
155 | * doesn't overshoot at all, and bounciness of N `>` 1 will overshoot about N
|
156 | * times.
|
157 | *
|
158 | * http://easings.net/#easeInElastic
|
159 | */
|
160 | function elastic(bounciness = 1) {
|
161 | 'worklet';
|
162 |
|
163 | const p = bounciness * Math.PI;
|
164 | return t => {
|
165 | 'worklet';
|
166 |
|
167 | return 1 - Math.pow(Math.cos(t * Math.PI / 2), 3) * Math.cos(t * p);
|
168 | };
|
169 | }
|
170 |
|
171 | /**
|
172 | * Use with `Animated.parallel()` to create a simple effect where the object
|
173 | * animates back slightly as the animation starts.
|
174 | *
|
175 | * Wolfram Plot:
|
176 | *
|
177 | * - http://tiny.cc/back_default (s = 1.70158, default)
|
178 | */
|
179 | function back(s = 1.70158) {
|
180 | 'worklet';
|
181 |
|
182 | return t => {
|
183 | 'worklet';
|
184 |
|
185 | return t * t * ((s + 1) * t - s);
|
186 | };
|
187 | }
|
188 |
|
189 | /**
|
190 | * Provides a simple bouncing effect.
|
191 | *
|
192 | * http://easings.net/#easeInBounce
|
193 | */
|
194 | function bounce(t) {
|
195 | 'worklet';
|
196 |
|
197 | if (t < 1 / 2.75) {
|
198 | return 7.5625 * t * t;
|
199 | }
|
200 | if (t < 2 / 2.75) {
|
201 | const t2 = t - 1.5 / 2.75;
|
202 | return 7.5625 * t2 * t2 + 0.75;
|
203 | }
|
204 | if (t < 2.5 / 2.75) {
|
205 | const t2 = t - 2.25 / 2.75;
|
206 | return 7.5625 * t2 * t2 + 0.9375;
|
207 | }
|
208 | const t2 = t - 2.625 / 2.75;
|
209 | return 7.5625 * t2 * t2 + 0.984375;
|
210 | }
|
211 |
|
212 | /**
|
213 | * Provides a cubic bezier curve, equivalent to CSS Transitions'
|
214 | * `transition-timing-function`.
|
215 | *
|
216 | * A useful tool to visualize cubic bezier curves can be found at
|
217 | * http://cubic-bezier.com/
|
218 | */
|
219 | function bezier(x1, y1, x2, y2) {
|
220 | 'worklet';
|
221 |
|
222 | return {
|
223 | factory: () => {
|
224 | 'worklet';
|
225 |
|
226 | return Bezier(x1, y1, x2, y2);
|
227 | }
|
228 | };
|
229 | }
|
230 | function bezierFn(x1, y1, x2, y2) {
|
231 | 'worklet';
|
232 |
|
233 | return Bezier(x1, y1, x2, y2);
|
234 | }
|
235 |
|
236 | /** Runs an easing function forwards. */
|
237 | function in_(easing) {
|
238 | 'worklet';
|
239 |
|
240 | return easing;
|
241 | }
|
242 |
|
243 | /** Runs an easing function backwards. */
|
244 | function out(easing) {
|
245 | 'worklet';
|
246 |
|
247 | return t => {
|
248 | 'worklet';
|
249 |
|
250 | return 1 - easing(1 - t);
|
251 | };
|
252 | }
|
253 |
|
254 | /**
|
255 | * Makes any easing function symmetrical. The easing function will run forwards
|
256 | * for half of the duration, then backwards for the rest of the duration.
|
257 | */
|
258 | function inOut(easing) {
|
259 | 'worklet';
|
260 |
|
261 | return t => {
|
262 | 'worklet';
|
263 |
|
264 | if (t < 0.5) {
|
265 | return easing(t * 2) / 2;
|
266 | }
|
267 | return 1 - easing((1 - t) * 2) / 2;
|
268 | };
|
269 | }
|
270 |
|
271 | /**
|
272 | * The `steps` easing function jumps between discrete values at regular
|
273 | * intervals, creating a stepped animation effect. The `n` parameter determines
|
274 | * the number of steps in the animation, and the `roundToNextStep` parameter
|
275 | * determines whether the animation should start at the beginning or end of each
|
276 | * step.
|
277 | */
|
278 | function steps(n = 10, roundToNextStep = true) {
|
279 | 'worklet';
|
280 |
|
281 | return t => {
|
282 | 'worklet';
|
283 |
|
284 | const value = Math.min(Math.max(t, 0), 1) * n;
|
285 | if (roundToNextStep) {
|
286 | return Math.ceil(value) / n;
|
287 | }
|
288 | return Math.floor(value) / n;
|
289 | };
|
290 | }
|
291 | const EasingObject = {
|
292 | linear,
|
293 | ease,
|
294 | quad,
|
295 | cubic,
|
296 | poly,
|
297 | sin,
|
298 | circle,
|
299 | exp,
|
300 | elastic,
|
301 | back,
|
302 | bounce,
|
303 | bezier,
|
304 | bezierFn,
|
305 | steps,
|
306 | in: in_,
|
307 | out,
|
308 | inOut
|
309 | };
|
310 | export const EasingNameSymbol = Symbol('easingName');
|
311 | for (const [easingName, easing] of Object.entries(EasingObject)) {
|
312 | Object.defineProperty(easing, EasingNameSymbol, {
|
313 | value: easingName,
|
314 | configurable: false,
|
315 | enumerable: false,
|
316 | writable: false
|
317 | });
|
318 | }
|
319 | export const Easing = EasingObject;
|
320 | //# sourceMappingURL=Easing.js.map |
\ | No newline at end of file |