如何让motion缩放动画随colorHex变化重新触发？

我正在使用Motion库，当变量colorHex变化时，背景色动画运行正常。我希望每次颜色变化时，元素能先放大再缩小，因此设置了scale: [1, 2, 1]，但由于该值未发生变化，缩放动画仅在初始时执行一次。请问如何确保缩放动画能随colorHex变化重新触发？

<motion.div
  transition={{ duration: 0.3, delay: offset * 0.1, ease: "easeOut" }}
  animate={{
    backgroundColor: colorHex,
    scale: [1, 2, 1],
  }}
  ...
/>

注：目前我找到的唯一临时解决方案是在颜色值变化时，设置一个略微不同的scale值。

解决方案 #

方法1：利用key属性强制重渲染 #

给motion.div绑定key属性，并将colorHex作为key的取值。当colorHex更新时，React会销毁旧组件实例并创建新的，从而让所有动画（包括缩放）重新执行：

<motion.div
  key={colorHex}
  transition={{ duration: 0.3, delay: offset * 0.1, ease: "easeOut" }}
  animate={{
    backgroundColor: colorHex,
    scale: [1, 2, 1],
  }}
  ...
/>

方法2：使用useAnimation手动控制动画 #

借助Motion的useAnimation钩子，监听colorHex的变化，每次变化时手动触发完整的动画序列：

import { motion, useAnimation } from "framer-motion";
import { useEffect } from "react";

// 组件内部逻辑
const animationControls = useAnimation();

useEffect(() => {
  animationControls.start({
    scale: [1, 2, 1],
    backgroundColor: colorHex,
    transition: { duration: 0.3, delay: offset * 0.1, ease: "easeOut" }
  });
}, [colorHex, animationControls, offset]);

// 渲染代码
<motion.div
  animate={animationControls}
  ...
/>

方法3：优化临时方案——给缩放序列添加动态微小偏移 #

基于colorHex生成一个极小的偏移值，让每次颜色变化时的缩放序列存在细微差异，从而触发动画重跑：

// 从colorHex生成唯一的微小偏移，避免硬编码
const tinyScaleOffset = parseInt(colorHex.slice(1), 16) % 0.001;

<motion.div
  transition={{ duration: 0.3, delay: offset * 0.1, ease: "easeOut" }}
  animate={{
    backgroundColor: colorHex,
    scale: [1 + tinyScaleOffset, 2, 1 + tinyScaleOffset],
  }}
  ...
/>

这三种方法各有适用场景：方法1实现成本最低，适合简单场景；方法2能提供更灵活的动画控制，适合复杂交互；方法3是对现有临时方案的优化，无需改动组件渲染逻辑。

内容的提问来源于stack exchange，提问作者Undistraction