跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >

Easing

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

你可以在 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.