3. Framer Motion 中 motion 组件

motion 组件：为 HTML 和 SVG 元素赋予动画能力

motion 对象是 Framer Motion 的核心，它是一个标签工厂函数。你可以使用它来创建能够进行动画和手势交互的 HTML 和 SVG 元素。其基本语法是 motion.<HTMLTag /> 或 motion.<SVGTag />。

1. HTML 元素

你可以将任何标准的 HTML 标签替换为 motion 对应的版本，从而使其具备动画能力。以下是一些常用的 HTML 元素及其 motion 版本：

• <div> -> <motion.div />
• <span> -> <motion.span />
• <button> -> <motion.button />
• <img> -> <motion.img />
• <a> -> <motion.a />
• <ul> -> <motion.ul />
• <li> -> <motion.li />
• <input> -> <motion.input />
• <textarea> -> <motion.textarea />
• <label> -> <motion.label />
• <form> -> <motion.form />
• 等等…

用法示例 (针对不同 HTML 元素):

import { motion } from "framer-motion";
import { useState } from "react";

function MotionHTMLElements() {
  const [isOpen, setIsOpen] = useState