捕捉 SVG 动画旋转答案

【问题标题】：Snap SVG animation rotate捕捉 SVG 动画旋转
【发布时间】：2014-07-23 16:13:49
【问题描述】：

我是第一次制作 SVG 动画，但遇到了一个问题：

我有一个沿着路径的箭头（在插画家中制作），我使用了一个在我使用的著名的 codepen 动画路径上找到的函数。现在，我设法使箭头的角度正确（经过多次尝试），但现在发生的事情是在我的动画结束时，由于我无法理解的原因，箭头只是做了一个奇怪的旋转（喜欢它正在把自己放回原来的位置）。

这是我的问题的 JSFiddle：

这是我认为问题所在的那一行，虽然我不太明白 .alpha + 90 的真正作用

tipGroup.transform( 't' + parseInt(movePoint.x - 8) + ',' + parseInt( movePoint.y - 9) + 'r' + (movePoint.alpha + 90));

提前感谢您的帮助！

【问题讨论】：

【解决方案1】：

从 Snap 库中关于角度导数的注释代码行判断：

还有这些关于您在邮件列表中遇到的问题的各种讨论：

我的猜测是库的bug，你应该通过github问题寻求帮助。

【讨论】：

【解决方案2】：

感谢@Delapouite 的链接。

我在谷歌论坛上得到了答案，我相信你是对的，这可能是一个 lirary 错误，但如果有人过来，这里有一个快速修复：

您必须在 animate 函数中将路径长度添加到 -1，这可以防止它走到尽头，从而不会旋转三角形。我想这是一个 hack，它仍然让我烦恼，但至少它有效！

我更改的代码位于小提琴的第 46 行：

Snap.animate(0, arrowLenght-1, function( value )

【讨论】：