Easing

React 实战教程 深入学习一线大厂必备前端技能,VIP 教程限时免费领取。 立即查看 >

Easing模块实现了常见的动画缓动函数。 This module is used by Animated.timing() to convey physically believable motion in animations.

You can find a visualization of some common easing functions at http://easings.net/

查看预置动画#

Easing模块通过以下几个方法提供了几种预置的动画:

  • 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

查看标准函数#

目前提供了三种标准缓动函数:

The poly function can be used to implement quartic, quintic, and other higher power functions.

查看补充函数#

此外还通过以下几个方法提供了几种数学函数:

  • 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

示例#


文档#

方法#

step0()#

static step0(n)

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


step1()#

static step1(n)

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


linear()#

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()#

static ease(t)

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

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


quad()#

static quad(t)

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

http://easings.net/#easeInQuad


cubic()#

static cubic(t)

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

http://easings.net/#easeInCubic


poly()#

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()#

static sin(t)

A sinusoidal function.

http://easings.net/#easeInSine


circle()#

static circle(t)

A circular function.

http://easings.net/#easeInCirc


exp()#

static exp(t)

An exponential function.

http://easings.net/#easeInExpo


elastic()#

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()#

static back(s)

Use with Animated.parallel() to create a simple effect where the object animates back slightly as the animation starts.


bounce()#

static bounce(t)

Provides a simple bouncing effect.

http://easings.net/#easeInBounce


bezier()#

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()#

static in easing;

Runs an easing function forwards.


out()#

static out(easing)

Runs an easing function backwards.


inOut()#

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.


本文档贡献者:sunnylqm(100.00%)#