我是第一次使用SVG动画,并遇到了一个问题:
我在路径后面有一个箭头(以插画家制作),我使用了一个在我使用过的着名的codepen animaton路径上找到的函数。 现在,我设法得到了正确的箭头角度(经过多次尝试),但现在发生的事情是,在我的动画结束时,由于我无法理解的原因,箭头只是做了一个奇怪的旋转(就像它一样)将自己置于原来的位置)。
这是我的问题的JSFiddle:
这是我认为问题所在的那一行,虽然我不太明白.alpha + 90真正做了什么
tipGroup.transform( 't' + parseInt(movePoint.x - 8) + ',' + parseInt( movePoint.y - 9) + 'r' + (movePoint.alpha + 90));
提前感谢您的帮助!
答案 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/