缓动函数

缓动函数用于改变动画在其持续期间的速度。不同的缓动函数为您的动画提供不同的“感觉”。

animate函数和 Motion for React 的 motion组件具有以下内置的缓动函数，您可以直接通过名称引用它们。

// Named easing
ease: "easeIn"

// Bezier curve
ease: [0.39, 0.24, 0.3, 1]

但是您仍然可以单独导入它们以直接使用，无论是用于来自 "motion/dom" 的微型 animate 函数，还是用于新颖的用例。

用法

所有 Motion 的缓动函数都可以直接从 "motion" 导入

import { easeIn } from "motion"

通过将 0-1 的进度值传递给这些函数，您将收到一个缓动后的进度值。

const eased = easeIn(0.75)

函数

Motion 提供了许多内置的缓动函数

• cubicBezier

• easeIn/easeOut/easeInOut

• backIn/backOut/backInOut

• circIn/circOut/circInOut

• anticipate

• linear

• steps

我通常对进入和退出过渡使用 "easeOut" 曲线。开始时的加速给用户一种响应迅速的感觉。我使用的持续时间不超过 0.3/0.4 秒，以保持动画快速。

~ Emil Kowalski,Web 动画

cubicBezier

cubicBezier 提供了对缓动曲线的非常精确的控制。

import { cubicBezier } from "motion"

const easing = cubicBezier(.35,.17,.3,.86)

const easedProgress = easing(0.5)

新的缓动曲线定义可以在cubic-bezier.com.

steps

steps 创建一个具有均匀间隔的离散步长的缓动。它符合规范CSSstepseasing.

import { steps } from "motion"

const easing = steps(4)

easing(0.2) // 0
easing(0.25) // 0.25

默认情况下，“steps”在步长结束时更改，这可以通过将 "start" 传递给 steps 来更改

const easing = steps(4, "start")

easing(0.2) // 0.25

步长的分布默认是线性的，但可以通过首先将 progress 传递给另一个缓动函数来调整。

const easing = steps(4)

easing(circInOut(0.2))

修饰符

缓动修饰符可用于创建镜像和反向的缓动函数。

reverseEasing

reverseEasing 接受一个缓动函数并返回一个新的函数，该函数会反转它。例如，一个 ease in 函数将变成一个 ease out 函数。

import { reverseEasing } from "motion"

const powerIn = (progress) => progress * progress

const powerOut = reverseEasing(powerIn)

mirrorEasing

mirrorEasing 接受一个缓动函数并返回一个新的函数，该函数会镜像它。例如，一个 ease in 函数将变成一个 ease in-out 函数。

import { mirrorEasing } from "motion"

const powerIn = (progress) => progress * progress

const powerInOut = mirrorEasing(powerInOut)