使用 Framer Motion 沿路径为 SVG 设置动画答案

【问题标题】：Animate SVG along path with Framer Motion使用 Framer Motion 沿路径为 SVG 设置动画
【发布时间】：2021-06-29 09:24:42
【问题描述】：

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

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

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

【问题讨论】：

现在和工作中一直在 8 个左右的项目中使用该库，我能想到的最接近的方法是使用 framer.com/api/motion/animation/#animate。虽然没有内置任何明确遵循路径的内容，但绝对没有任何声明性。

标签： reactjs animation svg path framer-motion

【解决方案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

【讨论】：

用viewbox怎么样？