使用帧运动动画路径到结束

Question

我有一个"链接";图标，我用它来探索SVG动画使用框架。

我将路径从0动画化，动画化后变为1，这是我想要的;它从开始动画到结束，然后从结束动画回到开始。

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

到目前为止，我有这个:

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道具。

这里有一个例子，动画在你有它，然后动画与pathOffset时，点击图标:
https://codesandbox.io/s/interesting-wu-lbocl?file=/src/App.js