使用Framer Motion沿路径制作SVG动画

Question

是否有一种方法可以使用Framer Motion沿路径(最好是SVG路径本身(设置SVG元素的动画？此外，动画SVG元素是否可能轮流改变其旋转？以下是我想要实现的一个例子(不完全是，只是一个例子(：

https://tympanus.net/codrops/2019/12/03/motion-paths-past-present-and-future/

根据Framer Motion文档中给出的示例，我没有发现任何类似的声明方式，但我想知道这是否可以通过MotionValues、onUpdate方法或命令式AnimationControls实现？

Answer 1

您可以使用motion.path设置pathLength属性的动画。然后将其与路径后面的元素上的offsetDistance配对。

import React from "react"
import { motion } from "framer-motion"
import "./styles.css"
const transition = { duration: 4, yoyo: Infinity, ease: "easeInOut" }
export default function App() {
return (
<div className="container">
<svg xmlns="http://www.w3.org/2000/svg" width="451" height="437">
<motion.path
d="M 239 17 C 142 17 48.5 103 48.5 213.5 C 48.5 324 126 408 244 408 C 362 408 412 319 412 213.5 C 412 108 334 68.5 244 68.5 C 154 68.5 102.68 135.079 99 213.5 C 95.32 291.921 157 350 231 345.5 C 305 341 357.5 290 357.5 219.5 C 357.5 149 314 121 244 121 C 174 121 151.5 167 151.5 213.5 C 151.5 260 176 286.5 224.5 286.5 C 273 286.5 296.5 253 296.5 218.5 C 296.5 184 270 177 244 177 C 218 177 197 198 197 218.5 C 197 239 206 250.5 225.5 250.5 C 245 250.5 253 242 253 218.5"
fill="transparent"
strokeWidth="12"
stroke="rgba(255, 255, 255, 0.69)"
strokeLinecap="round"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={transition}
/>
</svg>
<motion.div
className="box"
initial={{ offsetDistance: "0%", scale: 2.5 }}
animate={{ offsetDistance: "100%", scale: 1 }}
transition={transition}
/>
</div>
)
}

示例来源：Matt Perry：https://codesandbox.io/s/framer-motion-motion-along-a-path-41i3v

Answer 2

我认为offset-path还不能在Safari上工作，所以我能够在没有offset-path的情况下使用Framer Motion的useMotionValue钩子来实现这一点。

这首先要得到我们前进道路的可能总长度。然后，我们从运动监听器获得起始路径长度。这是0开始。

现在我们将起始长度(0(与总路径长度相乘，得到圆的起始X和Y坐标。

ProgressX和ProgressY连接到圆的中心。

在这种情况下，它应该将我们的圆正好放在路径的起点上。

这样做可以通过修改运动侦听器的初始值，使圆从起点开始的任何距离。

然后，只需听progressLength的更新，并在圆心发生变化时更新圆心。

import { motion, useMotionValue } from "framer-motion";
import { useRef, useEffect } from "react";
export default function App() {
const pathRefForeground = useRef(null);
const progressLength = useMotionValue(0);
const progressX = useMotionValue(0);
const progressY = useMotionValue(0);
useEffect(() => {
const pathElementForeground = pathRefForeground.current;
const totalPathLength = pathElementForeground.getTotalLength();
const initialProgress = progressLength.get();
const initialCoords = pathElementForeground.getPointAtLength(
initialProgress * totalPathLength
);
progressX.set(initialCoords.x);
progressY.set(initialCoords.y);
const unsubscribe = progressLength.onChange((latestPercent) => {
const latestPathProgress = pathElementForeground.getPointAtLength(
latestPercent * totalPathLength
);
progressX.set(latestPathProgress.x);
progressY.set(latestPathProgress.y);
});
return unsubscribe;
}, []);
const transition = {
repeat: Infinity,
bounce: 0.75,
type: "spring",
duration: 2
};
const progress = 50;
return (
<div
className="App"
style={{
minHeight: 500,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
background: "#d9eefd"
}}
>
<motion.svg width="500" height="50" viewBox="0 0 500 30">
<path
stroke="white"
strokeWidth="10"
strokeLinecap="round"
d="M15 15 H490"
/>
<motion.path
d="M15 15 H490"
stroke="#1f88eb"
strokeWidth="10"
strokeLinecap="round"
ref={pathRefForeground}
pathLength={progressLength}
initial={{ pathLength: 0 }}
animate={{ pathLength: progress / 100 }}
transition={transition}
/>
<motion.circle cx={progressX} cy={progressY} r="15" fill="#1f88eb" />
<motion.circle cx={progressX} cy={progressY} r="5" fill="white" />
</motion.svg>
</div>
);
}

这是一个现场演示：https://codesandbox.io/s/patient-sea-nbhs5u?file=/src/App.js