UNPKG

6.83 kBJavaScriptView Raw
1'use strict';
2
3import { 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 */
61function 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 */
73function 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 */
85function 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 */
97function 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 */
108function 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 */
123function 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 */
134function 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 */
145function 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 */
160function 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 */
179function 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 */
194function 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 */
219function 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}
230function bezierFn(x1, y1, x2, y2) {
231 'worklet';
232
233 return Bezier(x1, y1, x2, y2);
234}
235
236/** Runs an easing function forwards. */
237function in_(easing) {
238 'worklet';
239
240 return easing;
241}
242
243/** Runs an easing function backwards. */
244function 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 */
258function 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 */
278function 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}
291const 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};
310export const EasingNameSymbol = Symbol('easingName');
311for (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}
319export const Easing = EasingObject;
320//# sourceMappingURL=Easing.js.map
\No newline at end of file