捕捉SVG路径动画

Question

我将开始学习Snap SVG，并在教程的帮助下制作几乎我想要的路径动画。 我如何：

a。）将比例尺加入动画中吗？ 将类似s0.7的内容添加到转换中：

 planeGroup.transform( 't' + parseInt(movePoint.x - 40) + ',' + parseInt( movePoint.y - 200) + 'r' + (movePoint.alpha - 180) + s0.7);

...它打破了。 我希望飞机以原始比例开始，然后在动画过程中逐渐变小。

b。）确定飞机的位置，使其与其轨迹（路径）匹配，即轨迹似乎来自飞机吗？

https://jsfiddle.net/d0L8fbux/2/

提前致谢。

Answer 1

只是想弄清楚图像的旋转点在哪里的一种情况。 它也需要在其中心，尾部或前面旋转，并且x和y偏移取决于图像视觉中心以在路径的末端对齐。 排队可能有点麻烦。

所以我在飞机上增加了旋转中心

'r' + (movePoint.alpha - 180) + ',80,80'

只是有点猜测而没有真正了解图像。

Scale可以在末尾添加“ s0.7”。 所以转换看起来像这样...

planeGroup.transform( 't' + parseInt(movePoint.x-80) + ',' + parseInt( movePoint.y-80) + 'r' + (movePoint.alpha - 180) + ',80,80s0.5');