捕捉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'

在没有真正了解图像的情况下，这只是一些猜测。

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

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

jsfiddle