帧者在inview时的运动路径

Question

为什么路径动画不工作在谷歌Chrome当动画与whileInView，但在火狐浏览器它的工作?这是svg，我想动画和他的路径如下。

& lt; motion.path

initial={{pathLength:0}}
whileInView={{pathLength:1}}
transition={{duration:.5,delay:1.2}}
d="M45.2116 113.844C41.991 97.7723 43.8806 74.0318 54.5835 60.6377C59.4391 54.561 76.8443 44.698 82.3209 55.553C88.3209 67.4466 67.1346 70.6046 64.5162 58.711C62.2011 48.1945 69.8349 39.3482 78.5027 34.5433C93.8215 26.0521 110.121 25.8784 125.958 33.0516"
stroke="white"
strokeWidth="0.78976"
strokeMiterlimit="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</motion.svg>

Answer 1

我有同样的问题，但我使用framer-motion的useInView钩子解决了这个问题

import { motion, useInView } from 'framer-motion'
import React, { useRef } from 'react'
export function AnimatedPath() {
const ref = useRef<SVGPathElement>(null)
const isInView = useInView(ref)
return (
<svg>
<motion.path
ref={ref}
initial={{ pathLength: 0 }}
animate={{ pathLength: isInView ? 1 : 0 }}
transition={{ duration: 0.5, delay: 1.2 }}
d="M45.2116 113.844C41.991 97.7723 43.8806 74.0318 54.5835 60.6377C59.4391 54.561 76.8443 44.698 82.3209 55.553C88.3209 67.4466 67.1346 70.6046 64.5162 58.711C62.2011 48.1945 69.8349 39.3482 78.5027 34.5433C93.8215 26.0521 110.121 25.8784 125.958 33.0516"
stroke="white"
strokeWidth="0.78976"
strokeMiterlimit="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}

Answer 2

我在制作SVG路径动画时遇到了同样的问题。最终使用react-intersection-observer来查找元素是否在视图中，并在motion.path上使用animate prop而不是whileInView

import { InView } from "react-intersection-observer"
import { motion } from "framer-motion"
const Component = () => {
const [entered, setEntered] = setState(false)
return(
<InView
as="div"
onChange={(inView, entry) => {
console.log("Inview:", inView, "entry:", entry)
if (inView === true) {
setEntered(true)
}
}}
root={null}
rootMargin="0px"
threshold={0.8}>
<svg>
<motion.path
initial={{pathLength:0}}
animate={entered === true ? {pathLength:1} : {pathLength:0}}
transition={{duration:.5,delay:1.2}}
d="M45.2116 113.844C41.991 97.7723 43.8806 74.0318 54.5835 60.6377C59.4391 54.561 76.8443 44.698 82.3209 55.553C88.3209 67.4466 67.1346 70.6046 64.5162 58.711C62.2011 48.1945 69.8349 39.3482 78.5027 34.5433C93.8215 26.0521 110.121 25.8784 125.958 33.0516"
stroke="white"
strokeWidth="0.78976"
strokeMiterlimit="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Inview>
)
}
export default Component