react-native/docs/autogen_Easing.md

id, title, category, permalink

id	title	category	permalink
easing	Easing	APIs	docs/easing.html

The Easing module implements common easing functions. This module is used by Animate.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 provides a simple animation where the object goes slightly back before moving forward
• bounce provides a bouncing animation
• ease provides a simple inertial animation
• elastic provides a simple spring interaction

Standard functions #

Three standard easing functions are provided:

• linear
• quad
• cubic

The 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 provides a cubic bezier curve
• circle provides a circular function
• sin provides a sinusoidal function
• exp provides an exponential function

The following helpers are used to modify other easing functions.

• in runs an easing function forwards
• inOut makes any easing function symmetrical
• out runs an easing function backwards

Methods #

static step0(n) #

A stepping function, returns 1 for any positive value of n.

static step1(n) #

A stepping function, returns 1 if n is greater than or equal to 1.

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

static ease(t) #

A simple inertial interaction, similar to an object slowly accelerating to speed.

http://cubic-bezier.com/#.42,0,1,1

static quad(t) #

A quadratic function, f(t) = t * t. Position equals the square of elapsed time.

http://easings.net/#easeInQuad

static cubic(t) #

A cubic function, f(t) = t * t * t. Position equals the cube of elapsed time.

http://easings.net/#easeInCubic

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

static sin(t) #

A sinusoidal function.

http://easings.net/#easeInSine

static circle(t) #

A circular function.

http://easings.net/#easeInCirc

static exp(t) #

An exponential function.

http://easings.net/#easeInExpo

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

Wolfram Plots:

• http://tiny.cc/elastic_b_1 (bounciness = 1, default)
• http://tiny.cc/elastic_b_3 (bounciness = 3)

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)

static bounce(t) #

Provides a simple bouncing effect.

http://easings.net/#easeInBounce

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/

static in(easing) #

Runs an easing function forwards.

static out(easing) #

Runs an easing function backwards.

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.