框架运动:在过渡过程中是否有动画？

Question

我对切换按钮使用了简单的转换效果，非常类似于docs，我的手柄如下所示：

    <Handle
      animate
      layout
      isOn={isOn}
      transition={spring}
      variantColor={variantColor}
      onClick={() => setIsOn(!isOn)}
    />

我的手柄造型：

const Handle = styled(motion.div)<{ isOn: boolean; variantColor: string }>(
  ({ isOn, theme, variantColor }) => ({
    width: theme.spacing(3),
    height: theme.spacing(3),
    position: 'absolute',
    left: isOn ? '65%' : '0%',
    backgroundColor: variantColor,
    borderRadius: 'inherit',
    cursor: 'pointer',
  }),
);

left比例在单击时会发生变化，因此它会在“65%”到“0%”之间切换。我想要做的也是添加一个缩放动画，它使手柄变大，然后回到原来的大小，同时left转换生效。所以如果我试着：

<Handle
  animate={{
    scale: [null, 1.2, 1],
    opacity: 1,
  }}
  layout
  isOn={isOn}
  transition={spring}
  variantColor={variantColor}
  onClick={() => setIsOn(!isOn)}
/>

缩放动画发生在页面加载时，当转换发生时，我如何拥有这个动画触发器？请注意，缩放动画并不关心isOn是真是假，而不是从左到右移动句柄的转换，反之亦然。缩放动画完全相同，应该只在left转换的同时进行。

Answer 1

我发现其中一种方法是使用框架运动库中的useAnimation钩子。

import { motion, useAnimation } from 'framer-motion';

const control = useAnimation();

然后在onClick事件中使用它：

      onClick={() => {
        setIsOn(!isOn);
        control.start({
          scale: [null, 1.1, 1],
          transition: { duration: 0.2 },
        });
      }}