使用Framer Motion将路径动画化为结束

Question

我有一个“链接”图标，我正在使用Framer探索SVG动画。

我从0开始将路径设置为动画，一旦设置了动画，它就会按照我所希望的那样执行；它从开始到结束，然后从结束到开始。

接下来，我想试着看看如果我让图标从头到尾消失的动画效果会是什么样子。这将以类似于它当前工作方式的方式工作，除了它将使路径从开始而不是结束消失。

到目前为止，我有这样的想法：

export default function App() {
  const transition = {
    duration: 2,
    repeat: Infinity,
    repeatType: "reverse",
    ease: "easeInOut"
  };

  return (
    <svg
      height="256"
      width="256"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <motion.path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={transition}
      />
    </svg>
  );
}

和一个CodeSandbox链接；https://codesandbox.io/s/boring-burnell-kc6gt

我很难弄清楚我需要改变什么，才能从头到尾获得动画的路径。

Answer 1

可以在从0到1的运动路径上设置pathOffset动画，以便从头到尾设置动画。

但是你需要一些方法来在两个动画之间切换。因此，您需要使用Animation Controls编排动画，或者根据代码中的其他事件切换animation属性。

下面是一个示例，它按原样设置动画，然后在单击图标时使用pathOffset设置动画输出：

https://codesandbox.io/s/interesting-wu-lbocl?file=/src/App.js