glide

注意：此 API 已弃用。您可以将 type: "inertia" 与新的 animate() 一起使用函数.

—-

glide 可以使用动量物理学来制作变换动画。这非常适合创建滚动动量动画。

import { animate, glide } from "motion"

animate(
  element,
  { x: 500 },
  { easing: glide() }
)

注意： glide 是一个模拟，因此提供的目标关键帧和 duration 将被覆盖。

速度

glide 将自动将任何正在运行的动画的速度传递到下一个动画，因此中断动画会感觉很自然。

这可以通过手动将 velocity 传递给 glide 来覆盖。velocity 以单位/秒为单位进行测量。

animate(
  "#carousel",
  { x: 100 },
  { easing: glide({ velocity: 1000 }) }
)

如果您想为每个值传递不同的 velocity（例如，在指针手势结束时制作动画），您可以创建特定于值的选项

animate(
  "#ball",
  { x: 0, y: 0 },
  {
    x: { easing: glide({ velocity: 200 }) },
    y: { easing: spring({ velocity: 500 }) }
  }
)

边界

通过设置 min 和/或 max，您可以为 glide 动画设置边界。如果动画值超出这些边界，则spring动画将开始捕捉该值并将其动画到超出的边界。

glide({ min: -100, max: 100 })

选项

velocity

默认值： 0 或值的当前速度

开始 glide 动画的速度（单位/秒）。

glide({ velocity: 1000 })

power

默认值： 0.8

power 影响初始 velocity 有多少被纳入动画，从而影响动画滑行的距离。

值越高，动画投掷得越远，感觉越轻，而值越低，感觉越重。

glide({ power: 1 })

decay

默认值： 0.325

用于计算速度衰减的时间常数（以秒为单位）。值越高，动画持续时间越长，减速越缓慢，感觉越轻。

glide({ decay: 0.5 })

restSpeed

默认值： 2，或 0.05 (对于 scale)

弹簧动画被认为完成的最低速度（以绝对单位/秒为单位）。

spring({ restSpeed: 1 })

restDistance

默认值： 0.5 或 0.01 (对于 scale)

弹簧动画被认为完成的距动画目标的最小距离。

spring({ restDistance: 0.1 })

changeTarget

glide 动画自动计算要动画到的目标。通过设置 changeTarget，您可以获取此计算的目标并返回一个新的目标。

例如，以下示例中的函数会将目标捕捉到下一个 100

const roundTo = 100

glide({
  changeTarget: (target) => Math.ceil(target / roundTo) * roundTo
})

min

glide 动画的最小边界。如果动画值超出此边界，则弹簧动画将接管以将值捕捉到 min。

glide({ min: -100 })

max

glide 动画的最大边界。如果动画值超出此边界，则弹簧动画将接管以将值捕捉到 max。

glide({ max: 100 })

bounceStiffness

默认值： 100

如果动画超出 min/max 定义的边界，则弹簧的吸引力。值越高，运动越快、越锐利。

glide({ min: 100, bounceStiffness: 500 })

bounceDamping

默认值： 10

弹簧的阻力。值越高，弹簧的弹性越小。

glide({ max: 100, bounceDamping: 30 })

局限性

目前 spring 缓动存在一些局限性。

持续时间

damping: 0 的弹簧可以持续无限长的时间，但 Web Animations API 需要有限的 duration。因此，弹簧目前的上限为 10 秒（对于绝大多数 UI 动画来说，这已经足够长了）。
相对于 stiffness 增加 damping 以减少动画的持续时间。

时间线关键帧

spring 在 timeline 中受支持，但独立的变换必须使用开始和结束关键帧定义：{ x: [0, 100] }。

无硬件加速

spring 仅适用于独立的变换，这些变换在浏览器中尚未进行硬件加速。