Framer Motion - 在过渡属性上使用不同的持续时间

Question

我在 React 中使用 Framer Motion 来制作圆形进度条的动画。我已经成功地根据动态持续时间（从父组件传递的）使实际的圆圈进行动画处理。问题是我需要立即将不透明度设置为 1，而动画的其余部分将基于传递的道具的持续时间。css 中是这样的：transition: opacity 0s, {motionproperty} {duration}其中最后两个是运动属性 pathLength 和动态持续时间。

目前，我的 ProgressCircle 组件和 Framer Motion 动画变体如下所示：

const MotionProgressCircle = styled(motion.circle)``;

const progressCircleVariants = {
  initial: {
    pathLength: 0,
    strokeWidth: 3,
    opacity: 0,
    r: initRadius,
    transition: {
      duration: '500',
      strokeDashoffset: 0
    }
  },
  hover: {
    strokeWidth: 5,
    r: hoverRadius
  },
  playing: (duration) => ({
    pathLength: 1,
    transition: {
      type: "tween",
      duration: duration
     },
    opacity: 1,

  })
};

const ProgressCircle = ({ duration }) => {
  return (
    <div>
      <StyledContainer >
        
        <MotionProgressCircle
      
          variants={progressCircleVariants}
          initial="initial"
          animate="playing"
          custom={duration}
          whileHover="hover"
          fill="transparent"
          stroke="currentColor"
          cx="1em"
          cy="1em"
          strokeLinecap="round"
        />
      </StyledContainer>
    </div>
  );
};

我尝试过插入过渡属性的不同值，但这不起作用。

Answer 1

您可以通过将各个属性添加到对象来列出它们的转换设置transition：

playing: (duration) => ({
  pathLength: 1,
  opacity: 1,
  transition: {
    type: "tween",
    duration: duration, // default duration for this transition
    opacity: {
      duration: 0 // custom duration for opacity property only
    }
  },
})