繁体 English 中英

反应中的动画路径[关闭]

[英]Animate paths in react [closed]

原文 2021-12-03 12:05:43 5 0 javascript/ reactjs/ svg

在 vanilla Javascript 中有相对简单的方法来实现这一点（请参阅this for a这样的方法），但我正在努力让这样的东西在 React 中工作，特别是使用像Framer Motion这样的 animation 库。

Framer Motion 的useAnimatedPath返回一个方便的 animation object，其“当前”属性告诉您已经播放了多少百分比以及 object 的当前位置。

我想用这个属性来做这样的事情： const animation = path.getPointAtLength(animationProgress * pathLength);，然后使用 pts.x 和 pts.y 作为圆 SVG 的 x 和 y 属性- 因此，每当 animation 以每秒 50% 的速度运行时，圆的 animation 将沿 SVG 路径更新/动画。

我正在努力让它与 React 更具声明性的风格一起使用，因为我必须对圆和路径元素使用 refs，这意味着我必须将前面提到的 animation = path.getPointAtLength... 代码放在里面一个 useEffect 调用，两个 refs 作为依赖项（否则 refs 将未定义，在这种情况下，我的圆圈 SVG 的 x 和 y 上的 x 和 y 属性在第一次渲染时将无法访问。

有没有人解决过类似的问题或可能提供指导？

在此处查看代码示例