362 lines
5.2 KiB
Markdown
362 lines
5.2 KiB
Markdown
---
|
|
id: easing
|
|
title: Easing
|
|
layout: docs
|
|
category: APIs
|
|
permalink: docs/easing.html
|
|
next: geolocation
|
|
previous: dimensions
|
|
---
|
|
|
|
The `Easing` module implements common easing functions. This module is used
|
|
by [Animate.timing()](docs/animate.html#timing) to convey physically
|
|
believable motion in animations.
|
|
|
|
You can find a visualization of some common easing functions at
|
|
http://easings.net/
|
|
|
|
### Predefined animations
|
|
|
|
The `Easing` module provides several predefined animations through the
|
|
following methods:
|
|
|
|
- [`back`](docs/easing.html#back) provides a simple animation where the
|
|
object goes slightly back before moving forward
|
|
- [`bounce`](docs/easing.html#bounce) provides a bouncing animation
|
|
- [`ease`](docs/easing.html#ease) provides a simple inertial animation
|
|
- [`elastic`](docs/easing.html#elastic) provides a simple spring interaction
|
|
|
|
### Standard functions
|
|
|
|
Three standard easing functions are provided:
|
|
|
|
- [`linear`](docs/easing.html#linear)
|
|
- [`quad`](docs/easing.html#quad)
|
|
- [`cubic`](docs/easing.html#cubic)
|
|
|
|
The [`poly`](docs/easing.html#poly) function can be used to implement
|
|
quartic, quintic, and other higher power functions.
|
|
|
|
### Additional functions
|
|
|
|
Additional mathematical functions are provided by the following methods:
|
|
|
|
- [`bezier`](docs/easing.html#bezier) provides a cubic bezier curve
|
|
- [`circle`](docs/easing.html#circle) provides a circular function
|
|
- [`sin`](docs/easing.html#sin) provides a sinusoidal function
|
|
- [`exp`](docs/easing.html#exp) provides an exponential function
|
|
|
|
The following helpers are used to modify other easing functions.
|
|
|
|
- [`in`](docs/easing.html#in) runs an easing function forwards
|
|
- [`inOut`](docs/easing.html#inout) makes any easing function symmetrical
|
|
- [`out`](docs/easing.html#out) runs an easing function backwards
|
|
|
|
|
|
### Methods
|
|
|
|
- [`step0`](docs/easing.html#step0)
|
|
- [`step1`](docs/easing.html#step1)
|
|
- [`linear`](docs/easing.html#linear)
|
|
- [`ease`](docs/easing.html#ease)
|
|
- [`quad`](docs/easing.html#quad)
|
|
- [`cubic`](docs/easing.html#cubic)
|
|
- [`poly`](docs/easing.html#poly)
|
|
- [`sin`](docs/easing.html#sin)
|
|
- [`circle`](docs/easing.html#circle)
|
|
- [`exp`](docs/easing.html#exp)
|
|
- [`elastic`](docs/easing.html#elastic)
|
|
- [`back`](docs/easing.html#back)
|
|
- [`bounce`](docs/easing.html#bounce)
|
|
- [`bezier`](docs/easing.html#bezier)
|
|
- [`in`](docs/easing.html#in)
|
|
- [`out`](docs/easing.html#out)
|
|
- [`inOut`](docs/easing.html#inout)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
# Reference
|
|
|
|
## Methods
|
|
|
|
### `step0()`
|
|
|
|
```javascript
|
|
static step0(n)
|
|
```
|
|
|
|
|
|
A stepping function, returns 1 for any positive value of `n`.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `step1()`
|
|
|
|
```javascript
|
|
static step1(n)
|
|
```
|
|
|
|
|
|
A stepping function, returns 1 if `n` is greater than or equal to 1.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `linear()`
|
|
|
|
```javascript
|
|
static linear(t)
|
|
```
|
|
|
|
|
|
A linear function, `f(t) = t`. Position correlates to elapsed time one to
|
|
one.
|
|
|
|
http://cubic-bezier.com/#0,0,1,1
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `ease()`
|
|
|
|
```javascript
|
|
static ease(t)
|
|
```
|
|
|
|
|
|
A simple inertial interaction, similar to an object slowly accelerating to
|
|
speed.
|
|
|
|
http://cubic-bezier.com/#.42,0,1,1
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `quad()`
|
|
|
|
```javascript
|
|
static quad(t)
|
|
```
|
|
|
|
|
|
A quadratic function, `f(t) = t * t`. Position equals the square of elapsed
|
|
time.
|
|
|
|
http://easings.net/#easeInQuad
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `cubic()`
|
|
|
|
```javascript
|
|
static cubic(t)
|
|
```
|
|
|
|
|
|
A cubic function, `f(t) = t * t * t`. Position equals the cube of elapsed
|
|
time.
|
|
|
|
http://easings.net/#easeInCubic
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `poly()`
|
|
|
|
```javascript
|
|
static poly(n)
|
|
```
|
|
|
|
|
|
A power function. Position is equal to the Nth power of elapsed time.
|
|
|
|
n = 4: http://easings.net/#easeInQuart
|
|
n = 5: http://easings.net/#easeInQuint
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `sin()`
|
|
|
|
```javascript
|
|
static sin(t)
|
|
```
|
|
|
|
|
|
A sinusoidal function.
|
|
|
|
http://easings.net/#easeInSine
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `circle()`
|
|
|
|
```javascript
|
|
static circle(t)
|
|
```
|
|
|
|
|
|
A circular function.
|
|
|
|
http://easings.net/#easeInCirc
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `exp()`
|
|
|
|
```javascript
|
|
static exp(t)
|
|
```
|
|
|
|
|
|
An exponential function.
|
|
|
|
http://easings.net/#easeInExpo
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `elastic()`
|
|
|
|
```javascript
|
|
static elastic(bounciness)
|
|
```
|
|
|
|
|
|
A simple elastic interaction, similar to a spring oscillating back and
|
|
forth.
|
|
|
|
Default bounciness is 1, which overshoots a little bit once. 0 bounciness
|
|
doesn't overshoot at all, and bounciness of N > 1 will overshoot about N
|
|
times.
|
|
|
|
http://easings.net/#easeInElastic
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `back()`
|
|
|
|
```javascript
|
|
static back(s)
|
|
```
|
|
|
|
|
|
Use with `Animated.parallel()` to create a simple effect where the object
|
|
animates back slightly as the animation starts.
|
|
|
|
Wolfram Plot:
|
|
|
|
- http://tiny.cc/back_default (s = 1.70158, default)
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `bounce()`
|
|
|
|
```javascript
|
|
static bounce(t)
|
|
```
|
|
|
|
|
|
Provides a simple bouncing effect.
|
|
|
|
http://easings.net/#easeInBounce
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `bezier()`
|
|
|
|
```javascript
|
|
static bezier(x1, y1, x2, y2)
|
|
```
|
|
|
|
|
|
Provides a cubic bezier curve, equivalent to CSS Transitions'
|
|
`transition-timing-function`.
|
|
|
|
A useful tool to visualize cubic bezier curves can be found at
|
|
http://cubic-bezier.com/
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `in()`
|
|
|
|
```javascript
|
|
static in(easing)
|
|
```
|
|
|
|
|
|
Runs an easing function forwards.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `out()`
|
|
|
|
```javascript
|
|
static out(easing)
|
|
```
|
|
|
|
|
|
Runs an easing function backwards.
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
### `inOut()`
|
|
|
|
```javascript
|
|
static inOut(easing)
|
|
```
|
|
|
|
|
|
Makes any easing function symmetrical. The easing function will run
|
|
forwards for half of the duration, then backwards for the rest of the
|
|
duration.
|
|
|
|
|
|
|
|
|