升级指南

我们力求减少破坏性的 API 变更，但这偶尔是必要的。

最简单的升级方式是从您当前使用的版本开始，然后按照指南升级到下一个版本，依此类推，直到您达到最新版本。

主要版本之间的更改通常很小，因此这通常是一个快速的过程。

12.0

Motion 12 对 inView、hover 和 press 手势引入了一个小更改。

之前，每个回调都会提供触发的 PointerEvent（或者在 inView 的情况下，提供 IntersectionEntry）。

press("a", (startEvent) => {
  return (endEvent) => {}
})
  
hover("li", (startEvent) => {
  return (endEvent) => {}
})
  
inView("section", (startEntry) => {
  return (endEntry) => {}
})

现在，启动回调的第一个参数是执行手势的元素

press("a", (element, startEvent) => {
  return (endEvent) => {}
})
  
hover("li", (element, startEvent) => {
  return (endEvent) => {}
})
  
inView("section", (element, startEntry) => {
  return (endEntry) => {}
})

此更改的原因是，由于手势可以一次应用于多个元素，因此这些事件的主要用途是找出匹配元素的身份

hover("button", ({ target }) => {
  animate(target, { opacity: 0 })
  
  return (endEvent) => {}
})

由于无法保证启动或结束监听器附加到哪个元素，使得 target 和 currentTarget 有些不可预测，因此提供一个规范且稳定的参数来显式提供此元素是有意义的。

11.0

Motion 11.11.12 是合并了 Framer Motion 和 Motion One 的版本。由于用户群更大（20 倍），因此 Framer Motion API 的约定占了上风。

因此，这将是 Motion One 用户应该预期的最大一组破坏性更改。

注意： 一些 API 已在 11.0 中删除。如果删除了您依赖的 API，请通过以下方式告知我们功能请求我们可以考虑在未来的更新中恢复它。

animate

API 的最大变化是 animate 和 timeline 函数。

animate 现在分为两种尺寸，mini 和 hybrid。

mini animate 与 Motion One 中的旧 animate 函数大致相似。但是，它现在更小（仅 2.5kb）并支持默认值类型：

import { animate } from "motion/mini"

animate(element, { width: 200 })

但是，对于 timeline 的排序和动画独立变换，必须使用混合 animate 函数。

import { animate } from "motion"

animate(element, { x: 100 })

混合 animate 较大，目前为 18kb，尽管此大小将在短期内显着减小。

关于删除独立变换

动画独立变换是 Motion One 中一项受欢迎的功能。但是，在合并 Motion One 和 Framer Motion 时，我想将两个库的优点结合到一个软件包中。

Motion One 非常强调小文件大小，而 Framer Motion 则专注于顶级的动画性能。

通过提供功能更强大的混合 animate，为使 mini animate 更小提供了更多空间。

Motion One 过去使用 CSS 变量来 animate 独立变换。CSS 变量存在一个严重性能问题，即更改一个 CSS 变量总是会触发重绘。

Framer Motion 的方法是每帧构建一个 transform 字符串，其性能明显优于此方法。因此，当一种方法优于另一种方法时，向同一问题提供两种技术方法对我来说没有意义。

其他更改如下

回调函数

animate() 的回调函数语法已被混合 animate() 的动画单个值、motion 值和对象的能力所取代。

您可以像这样直接替换它

import { animate } from "motion"

animate(0, 1, { onUpdate: (progress) => {} })

选项

• easing 现在是 ease。

• direction 现在是 repeatType，具有 loop、mirror 和 reverse 选项。

• 已添加 repeatDelay。

• endDelay 已被删除。

• allowWebkitAcceleration 已被删除。

Spring/Glide

• glide 已被删除。glide 的用户可以改为通过混合 animate 函数使用 type: "inertia"。

• 弹簧动画是通过将 spring 传递给 type 选项来创建的，所有其他与弹簧相关的选项都传递给动画的选项，而不是 spring 函数

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

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, stiffness: 400 }
)

控制

• currentTime 现在是 time。

• playbackRate 现在是 speed。

• finish() 现在是 complete()。

• playState 已被删除。

• finished 可以由动画控件本身替换

const animation = animate()

animation.then(() => {})
await animation

inView

• amount："any" 选项现在是 "some"。

stagger

• start 现在是 startDelay。

scroll

scroll 函数已获得巨大的性能提升。现在，动画将尽可能通过浏览器的原生 ScrollTimeline 运行，或者在不可能的情况下通过 Motion 的新渲染批处理动画循环运行。

因此，捆绑包大小从 2.6kb 增加到 5.2kb。

此外，scroll 回调现在可以接受两个参数，progress 和（移动到第二个参数）info。

// Previously
scroll((info) => {}, options)

// Now
scroll((progress, info) => {}, options)

这允许仅需要使用 progress 的回调通过 ScrollTimeline 运行，从而减少滚动测量。

Motion DevTools

Motion DevTools 目前与 Motion 不兼容。如果您是 Motion DevTools 用户，请暂时停留在 motion@10。