文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

动画

组件

Motion values

Hooks

集成

JS

React

Vue

示例

开始使用

动画

组件

Motion values

Hooks

集成

Vue

过渡

过渡

A transition 定义了在两个值之间进行动画时使用的动画类型。

const transition = {
  duration: 0.8,
  delay: 0.5,
  ease: [0, 0.71, 0.2, 1.01],
}
// Motion component
<motion.div
  :animate="{ x: 100 }"
  :transition="transition"
/>

// animate() function
animate(".box", { x: 100 }, transition)

设置过渡

transition 可以设置在任何动画属性上，并且该过渡将在动画触发时使用。

<motion.div
  :whileHover="{
    scale: 1.1,
    transition: { duration: 0.2 }
  }"
/>

特定于值的过渡

当动画化多个值时，每个值都可以使用不同的过渡进行动画化，default 处理所有其他值

// Motion component
<motion.li
  :animate="{
    x: 0,
    opacity: 1,
    transition: {
      default: { type: 'spring' },
      opacity: { ease: 'linear' }
    }
  }"
/>

// animate() function
animate("li", { x: 0, opacity: 1 }, {
  default: { type: "spring" },
  opacity: { ease: "linear" }
})

默认过渡

可以通过 transition 属性设置默认过渡。可以针对特定的 motion 组件

<motion.div
  :animate="{ x: 100 }"
  :transition="{ type: 'spring', stiffness: 100 }"
/>

或者针对一组 motion 组件通过MotionConfig:

<MotionConfig :transition="{ duration: 0.4, ease: 'easeInOut' }">
  <App />
</MotionConfig>

过渡设置

type

默认值：动态

type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。

Tween 动画通过持续时间和缓动曲线来设置。

Spring 动画可以是基于物理的，也可以是基于持续时间的。

基于物理的 spring 动画通过 stiffness、damping 和 mass 来设置，并且这些动画会结合任何现有手势或动画的速度，以实现自然的反馈。

基于持续时间的 spring 动画通过 duration 和 bounce 来设置。这些动画不结合速度，但更容易理解。

Inertia 动画根据值的初始速度来减速值，通常用于实现惯性滚动。

<motion.path
  :animate="{ pathLength: 1 }"
  :transition="{ duration: 2, type: 'tween' }"
/>

Spring 可视化工具

Tween

duration

默认值：0.3 (如果定义了多个关键帧，则为 0.8)

动画的持续时间。也可以用于 "spring" 动画，当也设置了 bounce 时。

animate("ul > li", { opacity: 1 }, { duration: 1 })

ease

用于 tween 动画的缓动函数。接受

  • 缓动函数名称。例如 "linear"

  • 定义三次贝塞尔曲线的四个数字的数组。例如 [.17,.67,.83,.67]

  • 一个JavaScript 缓动函数，它接受并返回一个 0-1 之间的值。

以下是可用的缓动函数名称

  • "linear"

  • "easeIn", "easeOut", "easeInOut"

  • "circIn", "circOut", "circInOut"

  • "backIn", "backOut", "backInOut"

  • "anticipate"

当动画化关键帧时，ease 可以选择设置为缓动函数数组，以设置每个值之间不同的缓动效果

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { ease: ['easeIn', 'easeOut'] }
  }"
/>

我通常使用 "easeOut" 曲线用于进入和退出过渡。开始时的加速给用户一种响应迅速的感觉。我使用的持续时间不超过 0.3/0.4 秒，以保持动画快速。

~ Emil Kowalski,Web 动画

times

当动画化多个关键帧时，可以使用 times 来调整每个关键帧在整个动画中的位置。

times 中的每个值都是介于 0 和 1 之间的值，表示动画的开始和结束。

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { times: [0, 0.3, 1] }
  }"
/>

必须有与关键帧数量相同的 times。默认为均匀分布的持续时间数组。

Spring

bounce

默认值： 0.25

bounce 确定 spring 动画的“弹力”。

0 表示无弹力，1 表示极具弹力。

注意： 如果设置了 stiffness、damping 或 mass，则 bounce 和 duration 将被覆盖。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{ type: 'spring', bounce: 0.25 }"
/>

visualDuration

如果设置了 visualDuration，则会覆盖 duration。

视觉持续时间是一个时间，以秒为单位设置，动画将花费这个时间在视觉上达到其目标。

换句话说，大部分过渡将在此时间之前发生，“弹力部分”将主要在此之后发生。

这使得编辑 spring 变得更容易，并且可以在视觉上与其他基于时间的动画协调一致。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{
    type: 'spring',
    visualDuration: 0.5,
    bounce: 0.25
  }"
/>

damping

默认值： 10

反作用力强度。如果设置为 0，spring 将无限振荡。

<motion.a
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', damping: 300 }"
/>

mass

默认值： 1

移动物体的质量。值越高，运动越迟缓。

<motion.feTurbulence
  :animate="{ baseFrequency: 0.5 }"
  :transition="{ type: 'spring', mass: 0.5 }"
/>

stiffness

默认值： 1

Spring 的刚度。值越高，运动越突然。

<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>

我从来没有真正理解 damping、mass 和 stiffness 如何影响 spring 动画，所以我为自己制作了一个 工具 来可视化它。

~ Emil Kowalski,Web 动画

velocity

默认值： 当前值速度

Spring 的初始速度。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', velocity: 2 }"
/>

restSpeed

默认值： 0.1

如果绝对速度（单位为秒/单位）降至此值以下且增量小于 restDelta，则结束动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restSpeed: 0.5 }"
/>

restDelta

默认值： 0.01

如果距离低于此值且速度低于 restSpeed，则结束动画。当动画结束时，spring 将结束。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restDelta: 0.5 }"
/>

Inertia

一种根据值的初始速度减速值的动画。可以选择定义 min 和 max 边界，惯性将通过 spring 动画捕捉到这些边界。

此动画将自动预先计算目标值，可以使用 modifyTarget 属性修改该值。

这允许您添加捕捉到网格或类似的功能。

Inertia 也是用于 dragTransition 的动画，可以通过该属性进行配置。

power

默认值： 0.8

较高的 power 值等于更远的目标计算值。

<motion.div
  drag
  :dragTransition="{ power: 0.2 }"
/>

timeConstant

默认值： 700

调整时间常数将改变减速的持续时间，从而影响其感觉。

<motion.div
  drag
  :dragTransition="{ timeConstant: 200 }"
/>

modifyTarget

一个接收自动计算的目标并返回新目标的函数。用于将目标捕捉到网格非常有用。

<motion.div
  drag
  // dragTransition always type: inertia
  :dragTransition="{
    power: 0,
    // Snap calculated target to nearest 50 pixels
    modifyTarget: target => Math.round(target / 50) * 50
  }"
/>

min

最小约束。如果设置，该值将“碰撞”到此值（或者如果动画开始时小于此值，则立即弹跳到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

max

最大约束。如果设置，该值将“碰撞”到此值（或者如果初始动画值超过此值，则立即捕捉到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

bounceStiffness

默认值： 500

如果设置了 min 或 max，这将影响弹跳 spring 的刚度。值越高，运动越突然。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

bounceDamping

默认值： 10

如果设置了 min 或 max，这将影响弹跳 spring 的阻尼。如果设置为 0，spring 将无限振荡。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

编排

delay

默认值： 0

将动画延迟此持续时间（以秒为单位）。

animate(element, { filter: "blur(10px)" }, { delay: 0.3 })

通过将 delay 设置为负值，动画将从动画的该时长开始。例如，要从 1 秒处开始，可以将 delay 设置为 -1。

repeat

默认值： 0

重复过渡的次数。设置为 Infinity 以进行永久动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, duration: 2 }"
/>

repeatType

默认值： "loop"

如何重复动画。可以是以下任一种

  • loop：从头开始重复动画。

  • reverse：在前向和后向播放之间交替。

  • mirror：在每次迭代时切换动画原点和目标。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{
    repeat: 1,
    repeatType: 'reverse',
    duration: 2
  }"
/>

repeatDelay

默认值： 0

当重复动画时，repeatDelay 将设置每次重复之间等待的时间长度，以秒为单位。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, repeatDelay: 1 }"
/>

when

默认值： false

对于变体，描述动画应何时触发，相对于其子动画而言。

  • "beforeChildren"：子动画将在父动画完成后播放。

  • "afterChildren"：父动画将在子动画完成后播放。

<script setup>
const list = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" }
  }
}

const item = {
  hidden: {
    opacity: 0,
    transition: { duration: 2 }
  }
}
</script>

<template>
  <motion.ul :variants="list" animate="hidden">
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ul>
</template>

delayChildren

默认值： 0

对于变体，在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。

<sctipt setup>  
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item"/>
  </motion.ul>
</template>

staggerChildren

默认值： 0

对于变体，在父级上设置 staggerChildren 将使子级以此持续时间交错出现。

例如，如果 staggerChildren 设置为 0.1，则第一个子级将延迟 0 秒，第二个子级延迟 0.1 秒，第三个子级延迟 0.2 秒，依此类推。

计算出的延迟将添加到 delayChildren。

<sctipt setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template>
  <motion.ol
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ol>
</template>

staggerDirection

默认值： 1

子级交错的方向。1 将从第一个到最后一个子级交错，而 -1 将从最后一个到第一个子级交错。

<script setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5,
      staggerDirection: -1
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</script>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" :size="50" />
    <motion.li :variants="item" :size="50" />
  </motion.ul>
</template>

A transition 定义了在两个值之间进行动画时使用的动画类型。

const transition = {
  duration: 0.8,
  delay: 0.5,
  ease: [0, 0.71, 0.2, 1.01],
}
// Motion component
<motion.div
  :animate="{ x: 100 }"
  :transition="transition"
/>

// animate() function
animate(".box", { x: 100 }, transition)

设置过渡

transition 可以设置在任何动画属性上，并且该过渡将在动画触发时使用。

<motion.div
  :whileHover="{
    scale: 1.1,
    transition: { duration: 0.2 }
  }"
/>

特定于值的过渡

当动画化多个值时，每个值都可以使用不同的过渡进行动画化，default 处理所有其他值

// Motion component
<motion.li
  :animate="{
    x: 0,
    opacity: 1,
    transition: {
      default: { type: 'spring' },
      opacity: { ease: 'linear' }
    }
  }"
/>

// animate() function
animate("li", { x: 0, opacity: 1 }, {
  default: { type: "spring" },
  opacity: { ease: "linear" }
})

默认过渡

可以通过 transition 属性设置默认过渡。可以针对特定的 motion 组件

<motion.div
  :animate="{ x: 100 }"
  :transition="{ type: 'spring', stiffness: 100 }"
/>

或者针对一组 motion 组件通过MotionConfig:

<MotionConfig :transition="{ duration: 0.4, ease: 'easeInOut' }">
  <App />
</MotionConfig>

过渡设置

type

默认值：动态

type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。

Tween 动画通过持续时间和缓动曲线来设置。

Spring 动画可以是基于物理的，也可以是基于持续时间的。

基于物理的 spring 动画通过 stiffness、damping 和 mass 来设置，并且这些动画会结合任何现有手势或动画的速度，以实现自然的反馈。

基于持续时间的 spring 动画通过 duration 和 bounce 来设置。这些动画不结合速度，但更容易理解。

Inertia 动画根据值的初始速度来减速值，通常用于实现惯性滚动。

<motion.path
  :animate="{ pathLength: 1 }"
  :transition="{ duration: 2, type: 'tween' }"
/>

Spring 可视化工具

Tween

duration

默认值：0.3 (如果定义了多个关键帧，则为 0.8)

动画的持续时间。也可以用于 "spring" 动画，当也设置了 bounce 时。

animate("ul > li", { opacity: 1 }, { duration: 1 })

ease

用于 tween 动画的缓动函数。接受

  • 缓动函数名称。例如 "linear"

  • 定义三次贝塞尔曲线的四个数字的数组。例如 [.17,.67,.83,.67]

  • 一个JavaScript 缓动函数，它接受并返回一个 0-1 之间的值。

以下是可用的缓动函数名称

  • "linear"

  • "easeIn", "easeOut", "easeInOut"

  • "circIn", "circOut", "circInOut"

  • "backIn", "backOut", "backInOut"

  • "anticipate"

当动画化关键帧时，ease 可以选择设置为缓动函数数组，以设置每个值之间不同的缓动效果

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { ease: ['easeIn', 'easeOut'] }
  }"
/>

我通常使用 "easeOut" 曲线用于进入和退出过渡。开始时的加速给用户一种响应迅速的感觉。我使用的持续时间不超过 0.3/0.4 秒，以保持动画快速。

~ Emil Kowalski,Web 动画

times

当动画化多个关键帧时，可以使用 times 来调整每个关键帧在整个动画中的位置。

times 中的每个值都是介于 0 和 1 之间的值，表示动画的开始和结束。

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { times: [0, 0.3, 1] }
  }"
/>

必须有与关键帧数量相同的 times。默认为均匀分布的持续时间数组。

Spring

bounce

默认值： 0.25

bounce 确定 spring 动画的“弹力”。

0 表示无弹力，1 表示极具弹力。

注意： 如果设置了 stiffness、damping 或 mass，则 bounce 和 duration 将被覆盖。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{ type: 'spring', bounce: 0.25 }"
/>

visualDuration

如果设置了 visualDuration，则会覆盖 duration。

视觉持续时间是一个时间，以秒为单位设置，动画将花费这个时间在视觉上达到其目标。

换句话说，大部分过渡将在此时间之前发生，“弹力部分”将主要在此之后发生。

这使得编辑 spring 变得更容易，并且可以在视觉上与其他基于时间的动画协调一致。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{
    type: 'spring',
    visualDuration: 0.5,
    bounce: 0.25
  }"
/>

damping

默认值： 10

反作用力强度。如果设置为 0，spring 将无限振荡。

<motion.a
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', damping: 300 }"
/>

mass

默认值： 1

移动物体的质量。值越高，运动越迟缓。

<motion.feTurbulence
  :animate="{ baseFrequency: 0.5 }"
  :transition="{ type: 'spring', mass: 0.5 }"
/>

stiffness

默认值： 1

Spring 的刚度。值越高，运动越突然。

<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>

我从来没有真正理解 damping、mass 和 stiffness 如何影响 spring 动画，所以我为自己制作了一个 工具 来可视化它。

~ Emil Kowalski,Web 动画

velocity

默认值： 当前值速度

Spring 的初始速度。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', velocity: 2 }"
/>

restSpeed

默认值： 0.1

如果绝对速度（单位为秒/单位）降至此值以下且增量小于 restDelta，则结束动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restSpeed: 0.5 }"
/>

restDelta

默认值： 0.01

如果距离低于此值且速度低于 restSpeed，则结束动画。当动画结束时，spring 将结束。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restDelta: 0.5 }"
/>

Inertia

一种根据值的初始速度减速值的动画。可以选择定义 min 和 max 边界，惯性将通过 spring 动画捕捉到这些边界。

此动画将自动预先计算目标值，可以使用 modifyTarget 属性修改该值。

这允许您添加捕捉到网格或类似的功能。

Inertia 也是用于 dragTransition 的动画，可以通过该属性进行配置。

power

默认值： 0.8

较高的 power 值等于更远的目标计算值。

<motion.div
  drag
  :dragTransition="{ power: 0.2 }"
/>

timeConstant

默认值： 700

调整时间常数将改变减速的持续时间，从而影响其感觉。

<motion.div
  drag
  :dragTransition="{ timeConstant: 200 }"
/>

modifyTarget

一个接收自动计算的目标并返回新目标的函数。用于将目标捕捉到网格非常有用。

<motion.div
  drag
  // dragTransition always type: inertia
  :dragTransition="{
    power: 0,
    // Snap calculated target to nearest 50 pixels
    modifyTarget: target => Math.round(target / 50) * 50
  }"
/>

min

最小约束。如果设置，该值将“碰撞”到此值（或者如果动画开始时小于此值，则立即弹跳到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

max

最大约束。如果设置，该值将“碰撞”到此值（或者如果初始动画值超过此值，则立即捕捉到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

bounceStiffness

默认值： 500

如果设置了 min 或 max，这将影响弹跳 spring 的刚度。值越高，运动越突然。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

bounceDamping

默认值： 10

如果设置了 min 或 max，这将影响弹跳 spring 的阻尼。如果设置为 0，spring 将无限振荡。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

编排

delay

默认值： 0

将动画延迟此持续时间（以秒为单位）。

animate(element, { filter: "blur(10px)" }, { delay: 0.3 })

通过将 delay 设置为负值，动画将从动画的该时长开始。例如，要从 1 秒处开始，可以将 delay 设置为 -1。

repeat

默认值： 0

重复过渡的次数。设置为 Infinity 以进行永久动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, duration: 2 }"
/>

repeatType

默认值： "loop"

如何重复动画。可以是以下任一种

  • loop：从头开始重复动画。

  • reverse：在前向和后向播放之间交替。

  • mirror：在每次迭代时切换动画原点和目标。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{
    repeat: 1,
    repeatType: 'reverse',
    duration: 2
  }"
/>

repeatDelay

默认值： 0

当重复动画时，repeatDelay 将设置每次重复之间等待的时间长度，以秒为单位。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, repeatDelay: 1 }"
/>

when

默认值： false

对于变体，描述动画应何时触发，相对于其子动画而言。

  • "beforeChildren"：子动画将在父动画完成后播放。

  • "afterChildren"：父动画将在子动画完成后播放。

<script setup>
const list = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" }
  }
}

const item = {
  hidden: {
    opacity: 0,
    transition: { duration: 2 }
  }
}
</script>

<template>
  <motion.ul :variants="list" animate="hidden">
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ul>
</template>

delayChildren

默认值： 0

对于变体，在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。

<sctipt setup>  
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item"/>
  </motion.ul>
</template>

staggerChildren

默认值： 0

对于变体，在父级上设置 staggerChildren 将使子级以此持续时间交错出现。

例如，如果 staggerChildren 设置为 0.1，则第一个子级将延迟 0 秒，第二个子级延迟 0.1 秒，第三个子级延迟 0.2 秒，依此类推。

计算出的延迟将添加到 delayChildren。

<sctipt setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template>
  <motion.ol
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ol>
</template>

staggerDirection

默认值： 1

子级交错的方向。1 将从第一个到最后一个子级交错，而 -1 将从最后一个到第一个子级交错。

<script setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5,
      staggerDirection: -1
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</script>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" :size="50" />
    <motion.li :variants="item" :size="50" />
  </motion.ul>
</template>

A transition 定义了在两个值之间进行动画时使用的动画类型。

const transition = {
  duration: 0.8,
  delay: 0.5,
  ease: [0, 0.71, 0.2, 1.01],
}
// Motion component
<motion.div
  :animate="{ x: 100 }"
  :transition="transition"
/>

// animate() function
animate(".box", { x: 100 }, transition)

设置过渡

transition 可以设置在任何动画属性上，并且该过渡将在动画触发时使用。

<motion.div
  :whileHover="{
    scale: 1.1,
    transition: { duration: 0.2 }
  }"
/>

特定于值的过渡

当动画化多个值时，每个值都可以使用不同的过渡进行动画化，default 处理所有其他值

// Motion component
<motion.li
  :animate="{
    x: 0,
    opacity: 1,
    transition: {
      default: { type: 'spring' },
      opacity: { ease: 'linear' }
    }
  }"
/>

// animate() function
animate("li", { x: 0, opacity: 1 }, {
  default: { type: "spring" },
  opacity: { ease: "linear" }
})

默认过渡

可以通过 transition 属性设置默认过渡。可以针对特定的 motion 组件

<motion.div
  :animate="{ x: 100 }"
  :transition="{ type: 'spring', stiffness: 100 }"
/>

或者针对一组 motion 组件通过MotionConfig:

<MotionConfig :transition="{ duration: 0.4, ease: 'easeInOut' }">
  <App />
</MotionConfig>

过渡设置

type

默认值：动态

type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。

Tween 动画通过持续时间和缓动曲线来设置。

Spring 动画可以是基于物理的，也可以是基于持续时间的。

基于物理的 spring 动画通过 stiffness、damping 和 mass 来设置，并且这些动画会结合任何现有手势或动画的速度，以实现自然的反馈。

基于持续时间的 spring 动画通过 duration 和 bounce 来设置。这些动画不结合速度，但更容易理解。

Inertia 动画根据值的初始速度来减速值，通常用于实现惯性滚动。

<motion.path
  :animate="{ pathLength: 1 }"
  :transition="{ duration: 2, type: 'tween' }"
/>

Spring 可视化工具

Tween

duration

默认值：0.3 (如果定义了多个关键帧，则为 0.8)

动画的持续时间。也可以用于 "spring" 动画，当也设置了 bounce 时。

animate("ul > li", { opacity: 1 }, { duration: 1 })

ease

用于 tween 动画的缓动函数。接受

  • 缓动函数名称。例如 "linear"

  • 定义三次贝塞尔曲线的四个数字的数组。例如 [.17,.67,.83,.67]

  • 一个JavaScript 缓动函数，它接受并返回一个 0-1 之间的值。

以下是可用的缓动函数名称

  • "linear"

  • "easeIn", "easeOut", "easeInOut"

  • "circIn", "circOut", "circInOut"

  • "backIn", "backOut", "backInOut"

  • "anticipate"

当动画化关键帧时，ease 可以选择设置为缓动函数数组，以设置每个值之间不同的缓动效果

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { ease: ['easeIn', 'easeOut'] }
  }"
/>

我通常使用 "easeOut" 曲线用于进入和退出过渡。开始时的加速给用户一种响应迅速的感觉。我使用的持续时间不超过 0.3/0.4 秒，以保持动画快速。

~ Emil Kowalski,Web 动画

times

当动画化多个关键帧时，可以使用 times 来调整每个关键帧在整个动画中的位置。

times 中的每个值都是介于 0 和 1 之间的值，表示动画的开始和结束。

<motion.div
  :animate="{
    x: [0, 100, 0],
    transition: { times: [0, 0.3, 1] }
  }"
/>

必须有与关键帧数量相同的 times。默认为均匀分布的持续时间数组。

Spring

bounce

默认值： 0.25

bounce 确定 spring 动画的“弹力”。

0 表示无弹力，1 表示极具弹力。

注意： 如果设置了 stiffness、damping 或 mass，则 bounce 和 duration 将被覆盖。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{ type: 'spring', bounce: 0.25 }"
/>

visualDuration

如果设置了 visualDuration，则会覆盖 duration。

视觉持续时间是一个时间，以秒为单位设置，动画将花费这个时间在视觉上达到其目标。

换句话说，大部分过渡将在此时间之前发生，“弹力部分”将主要在此之后发生。

这使得编辑 spring 变得更容易，并且可以在视觉上与其他基于时间的动画协调一致。

<motion.div
  :animate="{ rotateX: 90 }"
  :transition="{
    type: 'spring',
    visualDuration: 0.5,
    bounce: 0.25
  }"
/>

damping

默认值： 10

反作用力强度。如果设置为 0，spring 将无限振荡。

<motion.a
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', damping: 300 }"
/>

mass

默认值： 1

移动物体的质量。值越高，运动越迟缓。

<motion.feTurbulence
  :animate="{ baseFrequency: 0.5 }"
  :transition="{ type: 'spring', mass: 0.5 }"
/>

stiffness

默认值： 1

Spring 的刚度。值越高，运动越突然。

<motion.section
  animate={{ rotate: 180 }}
  transition={{ type: 'spring', stiffness: 50 }}
/>

我从来没有真正理解 damping、mass 和 stiffness 如何影响 spring 动画，所以我为自己制作了一个 工具 来可视化它。

~ Emil Kowalski,Web 动画

velocity

默认值： 当前值速度

Spring 的初始速度。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', velocity: 2 }"
/>

restSpeed

默认值： 0.1

如果绝对速度（单位为秒/单位）降至此值以下且增量小于 restDelta，则结束动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restSpeed: 0.5 }"
/>

restDelta

默认值： 0.01

如果距离低于此值且速度低于 restSpeed，则结束动画。当动画结束时，spring 将结束。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ type: 'spring', restDelta: 0.5 }"
/>

Inertia

一种根据值的初始速度减速值的动画。可以选择定义 min 和 max 边界，惯性将通过 spring 动画捕捉到这些边界。

此动画将自动预先计算目标值，可以使用 modifyTarget 属性修改该值。

这允许您添加捕捉到网格或类似的功能。

Inertia 也是用于 dragTransition 的动画，可以通过该属性进行配置。

power

默认值： 0.8

较高的 power 值等于更远的目标计算值。

<motion.div
  drag
  :dragTransition="{ power: 0.2 }"
/>

timeConstant

默认值： 700

调整时间常数将改变减速的持续时间，从而影响其感觉。

<motion.div
  drag
  :dragTransition="{ timeConstant: 200 }"
/>

modifyTarget

一个接收自动计算的目标并返回新目标的函数。用于将目标捕捉到网格非常有用。

<motion.div
  drag
  // dragTransition always type: inertia
  :dragTransition="{
    power: 0,
    // Snap calculated target to nearest 50 pixels
    modifyTarget: target => Math.round(target / 50) * 50
  }"
/>

min

最小约束。如果设置，该值将“碰撞”到此值（或者如果动画开始时小于此值，则立即弹跳到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

max

最大约束。如果设置，该值将“碰撞”到此值（或者如果初始动画值超过此值，则立即捕捉到此值）。

<motion.div
  drag
  :dragTransition="{ min: 0, max: 100 }"
/>

bounceStiffness

默认值： 500

如果设置了 min 或 max，这将影响弹跳 spring 的刚度。值越高，运动越突然。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

bounceDamping

默认值： 10

如果设置了 min 或 max，这将影响弹跳 spring 的阻尼。如果设置为 0，spring 将无限振荡。

<motion.div
  drag
  :dragTransition="{
    min: 0,
    max: 100,
    bounceStiffness: 100
  }"
/>

编排

delay

默认值： 0

将动画延迟此持续时间（以秒为单位）。

animate(element, { filter: "blur(10px)" }, { delay: 0.3 })

通过将 delay 设置为负值，动画将从动画的该时长开始。例如，要从 1 秒处开始，可以将 delay 设置为 -1。

repeat

默认值： 0

重复过渡的次数。设置为 Infinity 以进行永久动画。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, duration: 2 }"
/>

repeatType

默认值： "loop"

如何重复动画。可以是以下任一种

  • loop：从头开始重复动画。

  • reverse：在前向和后向播放之间交替。

  • mirror：在每次迭代时切换动画原点和目标。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{
    repeat: 1,
    repeatType: 'reverse',
    duration: 2
  }"
/>

repeatDelay

默认值： 0

当重复动画时，repeatDelay 将设置每次重复之间等待的时间长度，以秒为单位。

<motion.div
  :animate="{ rotate: 180 }"
  :transition="{ repeat: Infinity, repeatDelay: 1 }"
/>

when

默认值： false

对于变体，描述动画应何时触发，相对于其子动画而言。

  • "beforeChildren"：子动画将在父动画完成后播放。

  • "afterChildren"：父动画将在子动画完成后播放。

<script setup>
const list = {
  hidden: {
    opacity: 0,
    transition: { when: "afterChildren" }
  }
}

const item = {
  hidden: {
    opacity: 0,
    transition: { duration: 2 }
  }
}
</script>

<template>
  <motion.ul :variants="list" animate="hidden">
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ul>
</template>

delayChildren

默认值： 0

对于变体，在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。

<sctipt setup>  
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item"/>
  </motion.ul>
</template>

staggerChildren

默认值： 0

对于变体，在父级上设置 staggerChildren 将使子级以此持续时间交错出现。

例如，如果 staggerChildren 设置为 0.1，则第一个子级将延迟 0 秒，第二个子级延迟 0.1 秒，第三个子级延迟 0.2 秒，依此类推。

计算出的延迟将添加到 delayChildren。

<sctipt setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</sctipt>

<template>
  <motion.ol
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" />
    <motion.li :variants="item" />
  </motion.ol>
</template>

staggerDirection

默认值： 1

子级交错的方向。1 将从第一个到最后一个子级交错，而 -1 将从最后一个到第一个子级交错。

<script setup>
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5,
      staggerDirection: -1
    }
  }
}

const item = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
}
</script>

<template> 
  <motion.ul
    :variants="container"
    initial="hidden"
    animate="show"
  >
    <motion.li :variants="item" :size="50" />
    <motion.li :variants="item" :size="50" />
  </motion.ul>
</template>

过渡

示例

超越基础

Motion+是一次性付费，终身会员资格。

除了高级 Motion 功能、早期访问内容和私有 Discord 社区外，您还将解锁访问 90 多个高级示例的源代码，这些示例将此页面上的 API 提升到一个新的水平。

正在加载...
正在加载...

获取 Motion+

获取 Motion+

获取 Motion+

布局动画

motion

保持联系

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky

保持联系

订阅以获取最新消息和更新。

©2025 Motion Division Ltd.
站点

关于

博客

文档

示例

Motion+

赞助

社交

Discord

GitHub

X/Twitter

Bluesky