文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JS

React

Vue

开始使用

示例

动画

手势

Motion 值

工具

集成

指南

JavaScript

frame

frame

frame 用于调度一个函数在 Motion 的动画循环中运行。使用 Motion 的动画循环

  • 避免布局抖动.

  • 为创建你自己的动画循环提供了一个简单的 keep-alive API。

  • 避免了多次 requestAnimationFrame 调用的显著性能开销。

用法

从 Motion 导入 frame

import { frame } from "motion"

调度一个回调

frame 的工作方式类似于 requestAnimationFrame，提供的回调将在下一个动画帧中执行。

frame 将动画帧分成三个步骤

  • read: 从 DOM 读取值或测量 DOM。

  • update: 在读取所有值后修改值。

  • render: 在更新所有值后将更新后的值应用于 DOM。

可以像这样调度一个函数在每个步骤中运行

frame.render(() => element.style.transform = "translateX(0px)")

取消回调

cancelFrame 可用于取消回调。

import { frame, cancelFrame } from "framer-motion"

function measureElement() {
  console.log(element.getBoundingClientRect())
}

frame.read(measureElement)
cancelFrame(measureElement)

动画循环

通常，你会希望每帧都持续触发一个函数。你可以通过传递 true 作为第二个参数来实现。

let i = 0

function update() {
  i++

  // Stop after 100 frames
  if (i >= 100) cancelFrame(update)
}

frame.update(update, true)

frame 用于调度一个函数在 Motion 的动画循环中运行。使用 Motion 的动画循环

  • 避免布局抖动.

  • 为创建你自己的动画循环提供了一个简单的 keep-alive API。

  • 避免了多次 requestAnimationFrame 调用的显著性能开销。

用法

从 Motion 导入 frame

import { frame } from "motion"

调度一个回调

frame 的工作方式类似于 requestAnimationFrame，提供的回调将在下一个动画帧中执行。

frame 将动画帧分成三个步骤

  • read: 从 DOM 读取值或测量 DOM。

  • update: 在读取所有值后修改值。

  • render: 在更新所有值后将更新后的值应用于 DOM。

可以像这样调度一个函数在每个步骤中运行

frame.render(() => element.style.transform = "translateX(0px)")

取消回调

cancelFrame 可用于取消回调。

import { frame, cancelFrame } from "framer-motion"

function measureElement() {
  console.log(element.getBoundingClientRect())
}

frame.read(measureElement)
cancelFrame(measureElement)

动画循环

通常，你会希望每帧都持续触发一个函数。你可以通过传递 true 作为第二个参数来实现。

let i = 0

function update() {
  i++

  // Stop after 100 frames
  if (i >= 100) cancelFrame(update)
}

frame.update(update, true)

frame 用于调度一个函数在 Motion 的动画循环中运行。使用 Motion 的动画循环

  • 避免布局抖动.

  • 为创建你自己的动画循环提供了一个简单的 keep-alive API。

  • 避免了多次 requestAnimationFrame 调用的显著性能开销。

用法

从 Motion 导入 frame

import { frame } from "motion"

调度一个回调

frame 的工作方式类似于 requestAnimationFrame，提供的回调将在下一个动画帧中执行。

frame 将动画帧分成三个步骤

  • read: 从 DOM 读取值或测量 DOM。

  • update: 在读取所有值后修改值。

  • render: 在更新所有值后将更新后的值应用于 DOM。

可以像这样调度一个函数在每个步骤中运行

frame.render(() => element.style.transform = "translateX(0px)")

取消回调

cancelFrame 可用于取消回调。

import { frame, cancelFrame } from "framer-motion"

function measureElement() {
  console.log(element.getBoundingClientRect())
}

frame.read(measureElement)
cancelFrame(measureElement)

动画循环

通常，你会希望每帧都持续触发一个函数。你可以通过传递 true 作为第二个参数来实现。

let i = 0

function update() {
  i++

  // Stop after 100 frames
  if (i >= 100) cancelFrame(update)
}

frame.update(update, true)

delay

mix

保持关注

订阅以获取最新的新闻和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持关注

订阅以获取最新的新闻和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky