过渡
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（类型）
默认值: Dynamic（动态）
type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。
Tween 动画通过 duration（持续时间）和 easing curve（缓动曲线）设置。
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)
动画的持续时间。当 bounce 也设置时，也可以用于 "spring" 动画。
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
如果绝对速度（单位为单位/秒）降至此值以下，并且 delta 小于 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 属性修改该值。
这允许您添加捕捉到网格或类似的功能。
惯性也是用于 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 }} />
Orchestration（编排）
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
对于 variants（变体），描述动画应何时触发，相对于其子动画。
"beforeChildren": 子动画将在父动画完成后播放。"afterChildren": 父动画将在子动画完成后播放。
const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } return ( <motion.ul variants={list} animate="hidden"> <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
delayChildren（延迟子动画）
默认值: 0
对于 variants（变体），在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
staggerChildren（错峰子动画）
默认值: 0
对于 variants（变体），在父级上设置 staggerChildren 将按此持续时间错峰子动画。
例如，如果 staggerChildren 设置为 0.1，则第一个子动画将延迟 0 秒，第二个延迟 0.1 秒，第三个延迟 0.2 秒，依此类推。
计算出的延迟将添加到 delayChildren。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ol variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ol> )
staggerDirection（错峰方向）
默认值: 1
错峰子动画的方向。1 将从第一个到最后一个子动画错峰，而 -1 从最后一个到第一个错峰。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5, staggerDirection: -1 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} size={50} /> <motion.li variants={item} size={50} /> </motion.ul> )
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（类型）
默认值: Dynamic（动态）
type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。
Tween 动画通过 duration（持续时间）和 easing curve（缓动曲线）设置。
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)
动画的持续时间。当 bounce 也设置时，也可以用于 "spring" 动画。
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
如果绝对速度（单位为单位/秒）降至此值以下，并且 delta 小于 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 属性修改该值。
这允许您添加捕捉到网格或类似的功能。
惯性也是用于 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 }} />
Orchestration（编排）
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
对于 variants（变体），描述动画应何时触发，相对于其子动画。
"beforeChildren": 子动画将在父动画完成后播放。"afterChildren": 父动画将在子动画完成后播放。
const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } return ( <motion.ul variants={list} animate="hidden"> <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
delayChildren（延迟子动画）
默认值: 0
对于 variants（变体），在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
staggerChildren（错峰子动画）
默认值: 0
对于 variants（变体），在父级上设置 staggerChildren 将按此持续时间错峰子动画。
例如，如果 staggerChildren 设置为 0.1，则第一个子动画将延迟 0 秒，第二个延迟 0.1 秒，第三个延迟 0.2 秒，依此类推。
计算出的延迟将添加到 delayChildren。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ol variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ol> )
staggerDirection（错峰方向）
默认值: 1
错峰子动画的方向。1 将从第一个到最后一个子动画错峰，而 -1 从最后一个到第一个错峰。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5, staggerDirection: -1 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} size={50} /> <motion.li variants={item} size={50} /> </motion.ul> )
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（类型）
默认值: Dynamic（动态）
type 决定了要使用的动画类型。它可以是 "tween"、"spring" 或 "inertia"。
Tween 动画通过 duration（持续时间）和 easing curve（缓动曲线）设置。
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)
动画的持续时间。当 bounce 也设置时，也可以用于 "spring" 动画。
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
如果绝对速度（单位为单位/秒）降至此值以下，并且 delta 小于 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 属性修改该值。
这允许您添加捕捉到网格或类似的功能。
惯性也是用于 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 }} />
Orchestration（编排）
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
对于 variants（变体），描述动画应何时触发，相对于其子动画。
"beforeChildren": 子动画将在父动画完成后播放。"afterChildren": 父动画将在子动画完成后播放。
const list = { hidden: { opacity: 0, transition: { when: "afterChildren" } } } const item = { hidden: { opacity: 0, transition: { duration: 2 } } } return ( <motion.ul variants={list} animate="hidden"> <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
delayChildren（延迟子动画）
默认值: 0
对于 variants（变体），在父级上设置 delayChildren 将延迟子动画此持续时间（以秒为单位）。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ul> )
staggerChildren（错峰子动画）
默认值: 0
对于 variants（变体），在父级上设置 staggerChildren 将按此持续时间错峰子动画。
例如，如果 staggerChildren 设置为 0.1，则第一个子动画将延迟 0 秒，第二个延迟 0.1 秒，第三个延迟 0.2 秒，依此类推。
计算出的延迟将添加到 delayChildren。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.5 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ol variants={container} initial="hidden" animate="show" > <motion.li variants={item} /> <motion.li variants={item} /> </motion.ol> )
staggerDirection（错峰方向）
默认值: 1
错峰子动画的方向。1 将从第一个到最后一个子动画错峰，而 -1 从最后一个到第一个错峰。
const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { delayChildren: 0.5, staggerDirection: -1 } } } const item = { hidden: { opacity: 0 }, show: { opacity: 1 } } return ( <motion.ul variants={container} initial="hidden" animate="show" > <motion.li variants={item} size={50} /> <motion.li variants={item} size={50} /> </motion.ul> )
