Framer-motion：点击第二个按钮触发RotatingButton的缩放动画

核心问题是原代码的缩放依赖第一个按钮的whileTap事件，只有点击第一个按钮时才会触发。要让第二个按钮也能触发这个缩放，需要把缩放动画的控制权从whileTap转移到全局可控的状态或动画控制器上。

方案1：使用useAnimationControls（推荐） #

利用Framer Motion的动画控制器统一管理缩放动画，不管点击哪个按钮都能触发：

import { useState } from 'react';
import { motion, useAnimationControls } from 'framer-motion';

function YourComponent() {
  const [rotation, setRotation] = useState<number>(0);
  // 创建动画控制器
  const scaleControls = useAnimationControls();

  const addValue = () => {
    setRotation(prev => prev + 180);
    // 触发缩放动画：从1缩到0.8再恢复到1，时长0.5秒
    scaleControls.start({
      scale: [1, 0.8, 1],
      transition: { duration: 0.5 }
    });
  };

  const removeValue = () => {
    setRotation(prev => prev + 180);
    // 同样触发缩放动画
    scaleControls.start({
      scale: [1, 0.8, 1],
      transition: { duration: 0.5 }
    });
  };

  return (
    <div>
      <div>
        <motion.button
          onClick={addValue}
          animate={{ rotate: rotation }}
          transition={{ duration: 0.5, ease: 'easeIn' }}
        >
          {/* 用控制器控制缩放，替代原来的whileTap */}
          <motion.div animate={scaleControls}>
            <RotatingButton />
          </motion.div>
        </motion.button>
      </div>
      <div>
        <button onClick={removeValue}>{text}</button>
      </div>
    </div>
  );
}

方案2：使用状态控制缩放 #

如果不想用动画控制器，也可以通过状态结合定时器实现：

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

function YourComponent() {
  const [rotation, setRotation] = useState<number>(0);
  const [scale, setScale] = useState(1);

  const triggerScale = () => {
    setScale(0.8);
    // 0.5秒后恢复原尺寸
    setTimeout(() => setScale(1), 500);
  };

  const addValue = () => {
    setRotation(prev => prev + 180);
    triggerScale();
  };

  const removeValue = () => {
    setRotation(prev => prev + 180);
    triggerScale();
  };

  return (
    <div>
      <div>
        <motion.button
          onClick={addValue}
          animate={{ rotate: rotation }}
          transition={{ duration: 0.5, ease: 'easeIn' }}
        >
          <motion.div
            animate={{ scale }}
            transition={{ duration: 0.5 }}
          >
            <RotatingButton />
          </motion.div>
        </motion.button>
      </div>
      <div>
        <button onClick={removeValue}>{text}</button>
      </div>
    </div>
  );
}

关键说明 #

• 原代码的whileTap是绑定在第一个按钮的点击交互上，只有直接点击该按钮才会触发缩放，所以第二个按钮无法触发。
• 两种方案都是将缩放动画的触发逻辑抽离为公共方法，让addValue和removeValue都能调用，从而实现点击第二个按钮时同步触发缩放效果。
• 方案1用Framer Motion原生控制器更简洁，动画控制更精准；方案2用状态实现更直观，适合不熟悉动画控制器的场景。

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