捕捉 SVG 路径动画

Snap SVG path animation

在教程的帮助下，我开始掌握 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/

提前致谢。

想弄清楚图片的旋转点需要在什么地方，只是胡思乱想而已。它是否需要在其中心、尾部或前部旋转，并且 x 和 y 偏移取决于图像视觉中心以在路径的末端对齐。不过排队可能有点麻烦。

所以我在平面上加了一个旋转中心

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

这只是在不真正了解图像的情况下进行的一些猜测。

比例可以在末尾添加 's0.7'。所以变换看起来像这样...

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

jsfiddle