Snap SVG动画旋转

时间:2014-06-03 10:50:54

标签: html css svg snap.svg

我是第一次使用SVG动画,并遇到了一个问题:

我在路径后面有一个箭头(以插画家制作),我使用了一个在我使用过的着名的codepen animaton路径上找到的函数。 现在,我设法得到了正确的箭头角度(经过多次尝试),但现在发生的事情是,在我的动画结束时,由于我无法理解的原因,箭头只是做了一个奇怪的旋转(就像它一样)将自己置于原来的位置)。

这是我的问题的JSFiddle:

http://jsfiddle.net/4cvaM/3/

这是我认为问题所在的那一行,虽然我不太明白.alpha + 90真正做了什么

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

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

从Snap lib中关于角度导数的这段注释代码行判断:

https://github.com/adobe-webplatform/Snap.svg/blob/master/src/path.js#L169

关于您在邮件列表中遇到的问题的各种讨论:

https://groups.google.com/d/msg/snapsvg/TOYtCQvLNHA/w8JCg5BVQMgJ https://groups.google.com/d/msg/raphaeljs/W9bA0SkArVY/ktkbu2OndAIJ

我的猜测是它是一个库错误,你应该通过github问题寻求帮助。

答案 1 :(得分:0)

感谢@Delapouite链接。

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

你必须在动画函数中为路径长度添加-1,这样可以防止它到达末尾,从而不会旋转三角形。 我想这是一个黑客,它仍然让我很烦,但至少它有效!

我改变的代码是小提琴上的第46行:

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

更新的小提琴: http://jsfiddle.net/4cvaM/9/