Skip to main content

Easing

Easing 模块实现常见的缓动功能。Animated.timing() 使用该模块在动画中传达物理上可信的运动。

¥The Easing module implements common easing functions. This module is used by Animated.timing() to convey physically believable motion in animations.

你可以在 https://easings.net/ 找到一些常见缓动函数的可视化

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

预定义动画​

¥Predefined animations

Easing 模块通过以下方法提供了几种预定义的动画：

¥The Easing module provides several predefined animations through the following methods:

  • back 提供了一个基本动画，其中对象在向前移动之前稍微向后移动

    ¥back provides a basic animation where the object goes slightly back before moving forward

  • bounce 提供弹跳动画

    ¥bounce provides a bouncing animation

  • ease 提供了基本的惯性动画

    ¥ease provides a basic inertial animation

  • elastic 提供了基本的 spring 交互

    ¥elastic provides a basic spring interaction

标准功能​

¥Standard functions

提供了三个标准缓动函数：

¥Three standard easing functions are provided:

poly 函数可用于实现四次、五次和其他更高次幂的函数。

¥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 提供三次贝塞尔曲线

    ¥bezier provides a cubic bezier curve

  • circle 提供循环功能

    ¥circle provides a circular function

  • sin 提供正弦函数

    ¥sin provides a sinusoidal function

  • exp 提供指数函数

    ¥exp provides an exponential function

以下辅助程序用于修改其他缓动函数。

¥The following helpers are used to modify other easing functions.

  • in 向前运行缓动函数

    ¥in runs an easing function forwards

  • inOut 使任何缓动函数对称

    ¥inOut makes any easing function symmetrical

  • out 向后运行缓动函数

    ¥out runs an easing function backwards

示例​

¥Example

参考

¥Reference

方法​

¥Methods

step0()​

static step0(n: number);

步进函数，对于 n 的任何正值都返回 1。

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

step1()​

static step1(n: number);

步进函数，如果 n 大于或等于 1，则返回 1。

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

linear()​

static linear(t: number);

线性函数 f(t) = t。位置与经过的时间一一对应。

¥A linear function, f(t) = t. Position correlates to elapsed time one to one.

https://cubic-bezier.com/#0,0,1,1

ease()​

static ease(t: number);

基本的惯性相互作用，类似于对象缓慢加速。

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

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

quad()​

static quad(t: number);

二次函数，f(t) = t * t。位置等于经过时间的平方。

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

https://easings.net/#easeInQuad

cubic()​

static cubic(t: number);

三次函数，f(t) = t * t * t。位置等于经过时间的立方。

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

https://easings.net/#easeInCubic

poly()​

static poly(n: number);

幂函数。位置等于经过时间的 N 次方。

¥A power function. Position is equal to the Nth power of elapsed time.

n = 4：https://easings.net/#easeInQuart n = 5：https://easings.net/#easeInQuint

sin()​

static sin(t: number);

正弦函数。

¥A sinusoidal function.

https://easings.net/#easeInSine

circle()​

static circle(t: number);

循环函数。

¥A circular function.

https://easings.net/#easeInCirc

exp()​

static exp(t: number);

指数函数。

¥An exponential function.

https://easings.net/#easeInExpo

elastic()​

static elastic(bounciness: number);

基本的弹性相互作用，类似于来回振荡的弹簧。

¥A basic elastic interaction, similar to a spring oscillating back and forth.

默认弹跳度为 1，一次会稍微超出一点。0 的弹跳度根本不会超调，而 N > 1 的弹跳度会超调大约 N 次。

¥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.

https://easings.net/#easeInElastic

back()​

static back(s)

与 Animated.parallel() 一起使用可创建基本效果，其中对象在动画开始时稍微向后移动。

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

bounce()​

static bounce(t: number);

提供基本的弹跳效果。

¥Provides a basic bouncing effect.

https://easings.net/#easeInBounce

bezier()​

static bezier(x1: number, y1: number, x2: number, y2: number);

提供三次贝塞尔曲线，相当于 CSS Transitions 的 transition-timing-function。

¥Provides a cubic bezier curve, equivalent to CSS Transitions' transition-timing-function.

可以在 https://cubic-bezier.com/ 找到可视化三次贝塞尔曲线的有用工具

¥A useful tool to visualize cubic bezier curves can be found at https://cubic-bezier.com/

in()​

static in(easing: number);

向前运行缓动函数。

¥Runs an easing function forwards.

out()​

static out(easing: number);

向后运行缓动函数。

¥Runs an easing function backwards.

inOut()​

static inOut(easing: number);

使任何缓动函数对称。缓动函数将向前运行一半的持续时间，然后向后运行剩余的持续时间。

¥Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.