捕捉 SVG 路径动画

Snap SVG path animation

本文关键字：动画 路径 SVG 捕捉      更新时间：2023-09-26

我正在掌握 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 offets 取决于图像视觉中心在路径的尽头对齐。不过排队可能有点麻烦。

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

'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');

斯菲德尔

相关文章：