在 vanilla Javascript 中有相对简单的方法可以实现这一点(请参阅this for a这样的方法),但我正在努力让这样的东西在 React 中工作,特别是使用像 Framer Motion 这样的动画库。
Framer Motion 的useViewPortScroll返回一个方便的 scrollYProgress 对象,其“current”属性告诉您用户当前滚动页面的百分比。
我想使用这个属性来做这样的事情:const pts = path.getPointAtLength(scrollPercentage * pathLength);
,然后使用pts.x
andpts.y
作为圆形 SVG 的 x 和 y 属性 - 所以每次我向下(或向上)滚动页面时, circle 将沿 SVG 路径更新/动画。
我正在努力让它与 React 更具声明性的风格一起使用,因为我必须对 circle 和 path 元素使用 refs,这意味着我必须将上述pts = path.getPointAtLength...
代码放在useEffect 调用中,两个 refs 为依赖项(否则 refs 将是未定义的,在这种情况下,我的圆形 SVG 的 x 和 y 上的pts.x
和pts.y
属性在第一次渲染时将无法访问。
有没有人解决过类似的问题或可能提供指导?