Framer Motion Transition 属性详解

Transition 属性是 Framer Motion 中最复杂和强大的属性之一,它控制着动画的方方面面。以下是 transition 属性的详细说明:

基本属性

1. duration

• 类型: number
• 描述: 动画持续时间,以秒为单位。
• 示例: duration: 0.5
• 使用案例:

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  淡入效果,持续0.5秒
</motion.div>

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  淡入效果,持续0.5秒
</motion.div>

• 说明: 这个属性很直观,就是设置动画从开始到结束需要多长时间。对于新手来说,可以先尝试不同的值,比如0.2秒(很快),1秒(较慢),来感受动画速度的变化。

2. delay

• 类型: number
• 描述: 动画开始前的延迟时间,以秒为单位。
• 示例: delay: 0.2
• 使用案例:

<motion.div
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ delay: 0.5 }}
>
  0.5秒后开始移动
</motion.div>

<motion.div
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ delay: 0.5 }}
>
  0.5秒后开始移动
</motion.div>

• 说明: 延迟可以用来创建序列动画。比如,你可以让页面上的元素一个接一个地出现,而不是同时出现,这样可以引导用户的注意力。

3. ease

• 类型: string | array
• 描述: 定义动画的加速和减速方式。
• 可选值:

1. easeIn - 缓动曲线: 缓慢开始,加速到结束。

• 使用场景: 适合元素离开屏幕或消失的动画。
• 案例:

<motion.div
  initial={{ opacity: 1, x: 0 }}
  animate={{ opacity: 0, x: 100 }}
  transition={{ ease: "easeIn", duration: 0.5 }}
>
  滑出消失
</motion.div>

<motion.div
  initial={{ opacity: 1, x: 0 }}
  animate={{ opacity: 0, x: 100 }}
  transition={{ ease: "easeIn", duration: 0.5 }}
>
  滑出消失
</motion.div>

• 适用元素: 模态框关闭、toast消息消失、列表项删除等。

2. easeOut - 缓动曲线: 快速开始,然后减速到结束。

• 使用场景: 适合元素进入屏幕或出现的动画。
• 案例:

<motion.div
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ ease: "easeOut", duration: 0.5 }}
>
  滑入出现
</motion.div>

<motion.div
  initial={{ opacity: 0, y: -50 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ ease: "easeOut", duration: 0.5 }}
>
  滑入出现
</motion.div>

• 适用元素: 下拉菜单展开、页面加载时的元素出现、弹出提示等。

3. easeInOut - 缓动曲线: 缓慢开始,加速中间,然后减速结束。

• 使用场景: 适合平滑的来回动画或强调动作的中间过程。
• 案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ ease: "easeInOut", duration: 1, times: [0, 0.5, 1] }}
>
  平滑缩放
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ ease: "easeInOut", duration: 1, times: [0, 0.5, 1] }}
>
  平滑缩放
</motion.div>

• 适用元素: 按钮点击效果、图片轮播切换、进度条动画等。

4. linear - 线性缓动,没有加速或减速,速度恒定。

• 使用场景: 适合匀速运动或需要精确时间控制的动画。
• 案例:

<motion.div
  animate={{ rotate: 360 }}
  transition={{ ease: "linear", duration: 2, repeat: Infinity }}
>
  匀速旋转
</motion.div>

<motion.div
  animate={{ rotate: 360 }}
  transition={{ ease: "linear", duration: 2, repeat: Infinity }}
>
  匀速旋转
</motion.div>

• 适用元素: 加载动画、时钟指针、进度条等需要匀速运动的元素。

5. circIn - 圆形缓动曲线: 类似于 easeIn,但更加突兀。

• 使用场景: 适合需要更强烈的加速感的离开动画。
• 案例:

<motion.div
  initial={{ scale: 1 }}
  animate={{ scale: 0 }}
  transition={{ ease: "circIn", duration: 0.5 }}
>
  快速缩小消失
</motion.div>

<motion.div
  initial={{ scale: 1 }}
  animate={{ scale: 0 }}
  transition={{ ease: "circIn", duration: 0.5 }}
>
  快速缩小消失
</motion.div>

• 适用元素: 弹窗关闭、游戏中物体快速消失、强调性的退出动画等。

6. circOut - 圆形缓动曲线: 类似于 easeOut,但更加突兀。

• 使用场景: 适合需要更强烈的减速感的进入动画。
• 案例:

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ ease: "circOut", duration: 0.5 }}
>
  快速放大出现
</motion.div>

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ ease: "circOut", duration: 0.5 }}
>
  快速放大出现
</motion.div>

• 适用元素: 弹窗打开、游戏中物体快速出现、强调性的进入动画等。

7. circInOut - 圆形缓动曲线: 类似于 easeInOut,但更加突兀。

• 使用场景: 适合需要更强烈的加速和减速感的来回动画。
• 案例:

<motion.div
  animate={{ x: [0, 100, 0] }}
  transition={{ ease: "circInOut", duration: 1, times: [0, 0.5, 1] }}
>
  强调性来回移动
</motion.div>

<motion.div
  animate={{ x: [0, 100, 0] }}
  transition={{ ease: "circInOut", duration: 1, times: [0, 0.5, 1] }}
>
  强调性来回移动
</motion.div>

• 适用元素: 强调性的切换动画、游戏中的弹跳效果、注意力引导动画等。

8. backIn - 回弹缓动曲线: 动画在开始前稍微回弹一下。

• 使用场景: 适合需要预备动作的离开动画。
• 案例:

<motion.div
  initial={{ x: 0 }}
  animate={{ x: 100 }}
  transition={{ ease: "backIn", duration: 0.5 }}
>
  回弹后离开
</motion.div>

<motion.div
  initial={{ x: 0 }}
  animate={{ x: 100 }}
  transition={{ ease: "backIn", duration: 0.5 }}
>
  回弹后离开
</motion.div>

• 适用元素: 抽屉关闭、列表项删除前的预备动作、强调性的退出动画等。

9. backOut - 回弹缓动曲线: 动画在结束前稍微回弹一下。

• 使用场景: 适合需要过冲效果的进入动画。
• 案例:

<motion.div
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ ease: "backOut", duration: 0.5 }}
>
  过冲后进入
</motion.div>

<motion.div
  initial={{ x: -100 }}
  animate={{ x: 0 }}
  transition={{ ease: "backOut", duration: 0.5 }}
>
  过冲后进入
</motion.div>

• 适用元素: 弹出菜单、通知提醒、强调性的进入动画等。

10. backInOut - 回弹缓动曲线: 动画在开始和结束时都回弹。

• 使用场景: 适合需要双向回弹效果的动画。

• 案例:

  <motion.div
    animate={{ scale: [1, 1.2, 0.8, 1] }}
    transition={{ ease: "backInOut", duration: 1, times: [0, 0.3, 0.7, 1] }}
  >
    双向回弹缩放
  </motion.div>
  

  <motion.div
    animate={{ scale: [1, 1.2, 0.8, 1] }}
    transition={{ ease: "backInOut", duration: 1, times: [0, 0.3, 0.7, 1] }}
  >
    双向回弹缩放
  </motion.div>
  

• 适用元素: 按钮点击反馈、图标强调动画、注意力引导等。

11. anticipate - 类似 backInOut,但前半部分更夸张一些。

• 使用场景: 适合需要更强烈预备动作的动画。

• 案例:

  <motion.div
    initial={{ rotate: 0 }}
    animate={{ rotate: 180 }}
    transition={{ ease: "anticipate", duration: 1 }}
  >
    夸张预备后旋转
  </motion.div>
  

  <motion.div
    initial={{ rotate: 0 }}
    animate={{ rotate: 180 }}
    transition={{ ease: "anticipate", duration: 1 }}
  >
    夸张预备后旋转
  </motion.div>
  

• 适用元素: 游戏中的蓄力动作、强调性的转场动画、注意力强烈引导等。

• 示例: ease: "easeInOut" 或 ease: [0.6, 0.01, -0.05, 0.95]

• 使用案例:

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ ease: "backOut" }}
>
  弹性放大效果
</motion.div>

<motion.div
  initial={{ scale: 0 }}
  animate={{ scale: 1 }}
  transition={{ ease: "backOut" }}
>
  弹性放大效果
</motion.div>

• 说明: 缓动函数决定了动画的"感觉"。比如,"easeIn"适合用于元素离开屏幕的动画,因为它模拟了物体加速的过程。"easeOut"适合用于元素进入屏幕的动画,因为它模拟了物体减速停止的过程。新手可以尝试不同的缓动函数,观察动画效果的变化。

4. times

• 类型: number[]
• 描述: 定义动画关键帧的时间点,范围从 0 到 1。
• 示例: times: [0, 0.1, 0.9, 1]
• 使用案例:

<motion.div
  animate={{
    scale: [1, 2, 2, 1],
    rotate: [0, 0, 180, 180],
    borderRadius: ["0%", "0%", "50%", "50%"],
  }}
  transition={{
    duration: 2,
    times: [0, 0.2, 0.8, 1],
  }}
>
  复杂的多阶段动画
</motion.div>

<motion.div
  animate={{
    scale: [1, 2, 2, 1],
    rotate: [0, 0, 180, 180],
    borderRadius: ["0%", "0%", "50%", "50%"],
  }}
  transition={{
    duration: 2,
    times: [0, 0.2, 0.8, 1],
  }}
>
  复杂的多阶段动画
</motion.div>

• 说明: times 属性允许你精确控制动画的进度。在上面的例子中,元素会在前20%的时间内放大,然后保持放大状态直到80%的时间点,最后在剩下的20%时间内缩小回原始大小。这对于创建复杂的、多阶段的动画非常有用。

5. repeat

• 类型: number
• 描述: 动画重复次数。使用 Infinity 表示无限重复。
• 示例: repeat: 2 或 repeat: Infinity
• 使用案例:

<motion.div
  animate={{ rotate: 360 }}
  transition={{ repeat: Infinity, duration: 1 }}
>
  无限旋转
</motion.div>

<motion.div
  animate={{ rotate: 360 }}
  transition={{ repeat: Infinity, duration: 1 }}
>
  无限旋转
</motion.div>

• 说明: 这个属性可以让动画重复播放,无限重复或者指定重复次数。对于新手来说,可以先尝试设置为2或3,观察动画的效果。

6. repeatType

• 类型: string
• 描述: 定义重复动画的行为。
• 可选值:
• "loop" - 动画重复时从头开始
• "reverse" - 动画重复时反向播放
• "mirror" - 动画重复时先反向后正向
• 示例: repeatType: "reverse"
• 使用案例:

<motion.div
  animate={{ x: [0, 100, 0] }}
  transition={{ repeat: Infinity, repeatType: "mirror", duration: 1 }}
>
  来回移动
</motion.div>

<motion.div
  animate={{ x: [0, 100, 0] }}
  transition={{ repeat: Infinity, repeatType: "mirror", duration: 1 }}
>
  来回移动
</motion.div>

• 说明: 这个属性可以控制动画在重复时的行为。"loop"表示从头开始,不改变方向。"reverse"表示每次重复时反向播放。"mirror"表示每次重复时先反向后正向。新手可以尝试不同的值,观察动画的效果。

7. repeatDelay

• 类型: number
• 描述: 每次重复之间的延迟时间,以秒为单位。
• 示例: repeatDelay: 0.5
• 使用案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ repeat: Infinity, repeatDelay: 0.5, duration: 0.5 }}
>
  有延迟的放大缩小
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ repeat: Infinity, repeatDelay: 0.5, duration: 0.5 }}
>
  有延迟的放大缩小
</motion.div>

• 说明: 这个属性可以让动画在每次重复之间有一定的延迟,这样可以创建更加自然的动画效果。新手可以尝试不同的值,观察动画的效果。

高级属性

8. type

• 类型: string
• 描述: 指定使用的动画类型。
• 可选值:
• "tween" - 补间动画（默认）
• "spring" - 弹簧动画
• "inertia" - 惯性动画
• 示例: type: "spring"
• 使用案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
>
  弹簧效果的放大缩小
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
>
  弹簧效果的放大缩小
</motion.div>

• 说明: 这个属性可以指定使用的动画类型。"tween"是默认的补间动画,它在开始和结束之间平滑地过渡。"spring"是弹簧动画,它模拟了物体的弹跳效果。"inertia"是惯性动画,它模拟了物体的惯性运动。新手可以尝试不同的类型,观察动画的效果。

9. stiffness（仅用于 spring 类型）

• 类型: number
• 描述: 弹簧的刚度。值越高,弹簧越"紧"。
• 示例: stiffness: 100
• 使用案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", stiffness: 200 }}
>
  弹簧效果的放大缩小,弹簧刚度更高
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", stiffness: 200 }}
>
  弹簧效果的放大缩小,弹簧刚度更高
</motion.div>

• 说明: 这个属性只对"spring"类型的动画有效。它控制了弹簧的刚度,值越高,弹簧的回弹力越大。新手可以尝试不同的值,观察弹簧效果的变化。

10. damping（仅用于 spring 类型）

• 类型: number
• 描述: 弹簧的阻尼。值越高,弹簧的"弹跳"越少。
• 示例: damping: 10
• 使用案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", damping: 20 }}
>
  弹簧效果的放大缩小,弹簧阻尼更高
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", damping: 20 }}
>
  弹簧效果的放大缩小,弹簧阻尼更高
</motion.div>

• 说明: 这个属性只对"spring"类型的动画有效。它控制了弹簧的阻尼,值越高,弹簧的回弹次数越少。新手可以尝试不同的值,观察弹簧效果的变化。

11. mass（仅用于 spring 类型）

• 类型: number
• 描述: 弹簧的质量。影响弹簧的惯性。
• 示例: mass: 1
• 使用案例:

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", mass: 2 }}
>
  弹簧效果的放大缩小,弹簧质量更大
</motion.div>

<motion.div
  animate={{ scale: [1, 1.2, 1] }}
  transition={{ type: "spring", mass: 2 }}
>
  弹簧效果的放大缩小,弹簧质量更大
</motion.div>

• 说明: 这个属性只对"spring"类型的动画有效。它控制了弹簧的质量,值越大,弹簧的惯性越大。新手可以尝试不同的值,观察弹簧效果的变化。

12. velocity（仅用于 inertia 类型）

• 类型: number
• 描述: 初始速度。
• 示例: velocity: 200
• 使用案例:

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "inertia", velocity: 500 }}
>
  惯性效果的移动,初始速度更快
</motion.div>

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "inertia", velocity: 500 }}
>
  惯性效果的移动,初始速度更快
</motion.div>

• 说明: 这个属性只对"inertia"类型的动画有效。它控制了物体的初始速度,值越大,物体的初始速度越快。新手可以尝试不同的值,观察惯性效果的变化。

13. bounce（仅用于 inertia 类型）

• 类型: number
• 描述: 反弹强度。0 表示不反弹。
• 示例: bounce: 0.25
• 使用案例:

<motion.div animate={{ y: 100 }} transition={{ type: "inertia", bounce: 0.5 }}>
  惯性效果的移动,反弹强度更大
</motion.div>

<motion.div animate={{ y: 100 }} transition={{ type: "inertia", bounce: 0.5 }}>
  惯性效果的移动,反弹强度更大
</motion.div>

• 说明: 这个属性只对"inertia"类型的动画有效。它控制了物体的反弹强度,值越大,物体的反弹效果越明显。新手可以尝试不同的值,观察反弹效果的变化。

14. restDelta

• 类型: number
• 描述: 认为动画"静止"的阈值。
• 示例: restDelta: 0.01
• 使用案例:

<motion.div animate={{ x: 100 }} transition={{ restDelta: 0.001 }}>
  精确的移动,静止阈值更小
</motion.div>

<motion.div animate={{ x: 100 }} transition={{ restDelta: 0.001 }}>
  精确的移动,静止阈值更小
</motion.div>

• 说明: 这个属性可以控制动画何时被认为是"静止"的。值越小,动画越容易被认为是静止的,这可以避免动画在接近目标值时闪烁或抖动。新手可以尝试不同的值,观察动画的效果。

15. restSpeed

• 类型: number
• 描述: 认为动画"静止"的速度阈值。
• 示例: restSpeed: 0.01
• 使用案例:

<motion.div animate={{ x: 100 }} transition={{ restSpeed: 0.001 }}>
  精确的移动,静止速度阈值更小
</motion.div>

<motion.div animate={{ x: 100 }} transition={{ restSpeed: 0.001 }}>
  精确的移动,静止速度阈值更小
</motion.div>

• 说明: 这个属性可以控制动画何时被认为是"静止"的。值越小,动画越容易被认为是静止的,这可以避免动画在接近目标值时闪烁或抖动。新手可以尝试不同的值,观察动画的效果。

综合示例

以下是一个综合示例,展示了如何组合使用多个 transition 属性来创建复杂的动画效果:

<motion.div
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1, rotate: 360 }}
  transition={{
    duration: 2,
    delay: 0.5,
    ease: [0.25, 0.1, 0.25, 1],
    times: [0, 0.2, 0.8, 1],
    repeat: Infinity,
    repeatType: "reverse",
    repeatDelay: 1,
    type: "spring",
    stiffness: 100,
    damping: 10,
    mass: 0.5,
    restDelta: 0.001,
  }}
>
  复杂动画示例
</motion.div>

<motion.div
  initial={{ opacity: 0, scale: 0.5 }}
  animate={{ opacity: 1, scale: 1, rotate: 360 }}
  transition={{
    duration: 2,
    delay: 0.5,
    ease: [0.25, 0.1, 0.25, 1],
    times: [0, 0.2, 0.8, 1],
    repeat: Infinity,
    repeatType: "reverse",
    repeatDelay: 1,
    type: "spring",
    stiffness: 100,
    damping: 10,
    mass: 0.5,
    restDelta: 0.001,
  }}
>
  复杂动画示例
</motion.div>

这个示例创建了一个元素,它从透明和缩小状态开始,然后淡入、放大并旋转360度。动画持续2秒,有0.5秒的初始延迟,使用自定义的缓动函数。动画会无限重复,每次重复之间有1秒的延迟,并且每次重复时会反向播放。此外,它使用弹簧动画类型,具有自定义的刚度、阻尼和质量值。 通过调整这些参数,您可以精确控制动画的每个方面,从而创造出流畅、自然和吸引人的用户界面动画。