spring

spring 函数最常用于为微型 animate() 提供弹簧功能函数.

import { animate } from "motion/mini"
import { spring } from "motion"

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, bounce: 0.3, duration: 0.8 }
)

但是，spring 也可以直接用于低级、高级用例。例如，创建弹簧可视化工具。

用法

从 Motion 导入 spring。

import { spring } from "motion"

spring 是一个返回生成器.

const generator = spring({ keyframes: [0, 100] })

此生成器可用于在特定时间（以毫秒为单位定义）对弹簧进行采样。

作为生成器，next() 返回两个值，value 和 done。

const { value, done } = generator.next(10) // Spring state at 10 milliseconds

弹簧可以非线性方式采样，这意味着您可以在任何时间对弹簧进行采样。

generator.next(100)
generator.next(10)

采样弹簧

对于大多数用例，例如 linear() 缓动生成或可视化，您可能希望按时间顺序运行生成器。您可以使用普通循环来执行此操作，直到弹簧完成。

const generator = spring({ keyframes: [25, 75], stiffness: 400 })
const output = []

let isDone = false
let time = 0
const sampleDuration = 20 // ms

while (!isDone) {
  const { value, done } = generator.next(time)

  output.push(value)

  time += sampleDuration

  if (done) isDone = true
}

警告：damping: 0 的弹簧将永远运行，因此您需要对弹簧将被采样的次数或最小 damping 可以是多少等设置某种约束。

可视化工具

CSS 生成

可以使用 spring() 生成 CSS 过渡。

element.style.transition = "all " + spring(0.5)

阅读CSS 生成指南了解更多详情。

选项

可以使用许多选项配置弹簧。

keyframes

spring 必须 提供两个关键帧以在两者之间进行动画处理。这些可以是任意两个数值。

spring({ keyframes: [0, 100] })

时间选项

注意：如果设置了任何物理选项，时间选项将被覆盖。

duration

默认值： 800

整个弹簧的持续时间。

重要提示：大多数 Motion API 使用秒，由于历史原因，duration 设置为毫秒。

visualDuration

如果设置了 visualDuration，这将覆盖 duration。

视觉持续时间是一个时间，以秒为单位设置，动画将花费这么长时间才能在视觉上达到其目标。

换句话说，大部分过渡将在此时间之前发生，而“弹性部分”将主要在此之后发生。

这使得编辑弹簧以及在视觉上将其与其他基于时间的动画协调起来更容易。

bounce

默认值： 0.25

bounce 确定弹簧动画的“弹性”。

0 表示无弹性，1 表示极具弹性。

注意：如果设置了 stiffness、damping 或 mass，bounce 和 duration 将被覆盖。

物理选项

damping

默认值： 10

反作用力的强度。如果设置为 0，弹簧将无限振荡。

mass

默认值： 1

运动物体的质量。值越高，运动越迟缓。

stiffness

默认值： 1

弹簧的刚度。值越高，产生的运动越突然。

velocity

默认值： 当前值速度

弹簧的初始速度。

restSpeed

默认值： 0.1

如果绝对速度（单位为单位/秒）降至此值以下且 delta 小于 restDelta，则结束动画。

restDelta

默认值： 0.01

如果距离低于此值且速度低于 restSpeed，则结束动画。动画结束时，弹簧也将结束。