UNPKG

5.98 kBTypeScriptView Raw
1import type { EasingFunction } from './commonTypes';
2/**
3 * The `Easing` module implements common easing functions. This module is used
4 * by [Animate.timing()](docs/animate.html#timing) to convey physically
5 * believable motion in animations.
6 *
7 * You can find a visualization of some common easing functions at
8 * http://easings.net/
9 *
10 * ### Predefined animations
11 *
12 * The `Easing` module provides several predefined animations through the
13 * following methods:
14 *
15 * - [`back`](docs/easing.html#back) provides a simple animation where the object
16 * goes slightly back before moving forward
17 * - [`bounce`](docs/easing.html#bounce) provides a bouncing animation
18 * - [`ease`](docs/easing.html#ease) provides a simple inertial animation
19 * - [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
20 *
21 * ### Standard functions
22 *
23 * Three standard easing functions are provided:
24 *
25 * - [`linear`](docs/easing.html#linear)
26 * - [`quad`](docs/easing.html#quad)
27 * - [`cubic`](docs/easing.html#cubic)
28 *
29 * The [`poly`](docs/easing.html#poly) function can be used to implement
30 * quartic, quintic, and other higher power functions.
31 *
32 * ### Additional functions
33 *
34 * Additional mathematical functions are provided by the following methods:
35 *
36 * - [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
37 * - [`circle`](docs/easing.html#circle) provides a circular function
38 * - [`sin`](docs/easing.html#sin) provides a sinusoidal function
39 * - [`exp`](docs/easing.html#exp) provides an exponential function
40 *
41 * The following helpers are used to modify other easing functions.
42 *
43 * - [`in`](docs/easing.html#in) runs an easing function forwards
44 * - [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
45 * - [`out`](docs/easing.html#out) runs an easing function backwards
46 */
47/** @deprecated Please use {@link EasingFunction} type instead. */
48export type EasingFn = EasingFunction;
49export type EasingFunctionFactory = {
50 factory: () => EasingFunction;
51};
52/** @deprecated Please use {@link EasingFunctionFactory} type instead. */
53export type EasingFactoryFn = EasingFunctionFactory;
54/**
55 * A linear function, `f(t) = t`. Position correlates to elapsed time one to
56 * one.
57 *
58 * http://cubic-bezier.com/#0,0,1,1
59 */
60declare function linear(t: number): number;
61/**
62 * A simple inertial interaction, similar to an object slowly accelerating to
63 * speed.
64 *
65 * http://cubic-bezier.com/#.42,0,1,1
66 */
67declare function ease(t: number): number;
68/**
69 * A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
70 * time.
71 *
72 * http://easings.net/#easeInQuad
73 */
74declare function quad(t: number): number;
75/**
76 * A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
77 * time.
78 *
79 * http://easings.net/#easeInCubic
80 */
81declare function cubic(t: number): number;
82/**
83 * A power function. Position is equal to the Nth power of elapsed time.
84 *
85 * N = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint
86 */
87declare function poly(n: number): EasingFunction;
88/**
89 * A sinusoidal function.
90 *
91 * http://easings.net/#easeInSine
92 */
93declare function sin(t: number): number;
94/**
95 * A circular function.
96 *
97 * http://easings.net/#easeInCirc
98 */
99declare function circle(t: number): number;
100/**
101 * An exponential function.
102 *
103 * http://easings.net/#easeInExpo
104 */
105declare function exp(t: number): number;
106/**
107 * A simple elastic interaction, similar to a spring oscillating back and forth.
108 *
109 * Default bounciness is 1, which overshoots a little bit once. 0 bounciness
110 * doesn't overshoot at all, and bounciness of N `>` 1 will overshoot about N
111 * times.
112 *
113 * http://easings.net/#easeInElastic
114 */
115declare function elastic(bounciness?: number): EasingFunction;
116/**
117 * Use with `Animated.parallel()` to create a simple effect where the object
118 * animates back slightly as the animation starts.
119 *
120 * Wolfram Plot:
121 *
122 * - http://tiny.cc/back_default (s = 1.70158, default)
123 */
124declare function back(s?: number): (t: number) => number;
125/**
126 * Provides a simple bouncing effect.
127 *
128 * http://easings.net/#easeInBounce
129 */
130declare function bounce(t: number): number;
131/**
132 * Provides a cubic bezier curve, equivalent to CSS Transitions'
133 * `transition-timing-function`.
134 *
135 * A useful tool to visualize cubic bezier curves can be found at
136 * http://cubic-bezier.com/
137 */
138declare function bezier(x1: number, y1: number, x2: number, y2: number): {
139 factory: () => (x: number) => number;
140};
141declare function bezierFn(x1: number, y1: number, x2: number, y2: number): (x: number) => number;
142/** Runs an easing function forwards. */
143declare function in_(easing: EasingFunction): EasingFunction;
144/** Runs an easing function backwards. */
145declare function out(easing: EasingFunction): EasingFunction;
146/**
147 * Makes any easing function symmetrical. The easing function will run forwards
148 * for half of the duration, then backwards for the rest of the duration.
149 */
150declare function inOut(easing: EasingFunction): EasingFunction;
151/**
152 * The `steps` easing function jumps between discrete values at regular
153 * intervals, creating a stepped animation effect. The `n` parameter determines
154 * the number of steps in the animation, and the `roundToNextStep` parameter
155 * determines whether the animation should start at the beginning or end of each
156 * step.
157 */
158declare function steps(n?: number, roundToNextStep?: boolean): EasingFunction;
159export declare const EasingNameSymbol: unique symbol;
160export declare const Easing: {
161 linear: typeof linear;
162 ease: typeof ease;
163 quad: typeof quad;
164 cubic: typeof cubic;
165 poly: typeof poly;
166 sin: typeof sin;
167 circle: typeof circle;
168 exp: typeof exp;
169 elastic: typeof elastic;
170 back: typeof back;
171 bounce: typeof bounce;
172 bezier: typeof bezier;
173 bezierFn: typeof bezierFn;
174 steps: typeof steps;
175 in: typeof in_;
176 out: typeof out;
177 inOut: typeof inOut;
178};
179export {};
180//# sourceMappingURL=Easing.d.ts.map
\No newline at end of file