animation - 拉斐尔动画基于位置而不是时间

Question

我有两个路径元素。为了便于描述，我们只说一个是心形，另一个是圆角正方形。

我试图让一个像这样插入另一个：

这很容易做到，但我需要根据元素 X 位置而不是时间来做到这一点。

因此，当我在 Xval 100 和 200 之间拖动路径元素时，它会慢慢变形到第二条路径，直到它最终在 X 值 200 处完成转换。

有谁知道我该怎么做？

score 2 · Accepted Answer

我将使用拖动处理程序（或者您可以绑定到 mousemove 事件并输入坐标）并使用它在起始位置和基于 x 或 y 坐标的目标动画之间移动，并使用Element.status。查看小提琴（基于您的）：

很抱歉——我最初给了你一份你自己的小提琴的副本。非常糟糕的形式=（试试这个：

score 0 · Accepted Answer

到目前为止，这是我想出的：

这可行，但依赖于延迟，我担心这会在较慢的机器上中断，而且它的接缝真的很糟糕。如果有人知道更好的解决方案，请告诉我。

2 回答 2