捕捉 SVG 路径动画答案

【问题标题】：Snap SVG path animation捕捉 SVG 路径动画
【发布时间】：2016-01-20 05:03:15
【问题描述】：

在教程的帮助下，我开始掌握 Snap SVG 并制作了几乎我想要的路径动画。我该怎么做：

a.) 在动画中加入比例？在转换中添加类似 s0.7 的内容：

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

...它打破了它。我希望飞机以原始比例开始，然后在动画期间变小。

b.) 将飞机定位，使其匹配其轨迹（路径），即轨迹似乎来自飞机？

提前致谢。

【问题讨论】：

【解决方案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');

【讨论】：

嗯，我明白了。如何让飞机在整个动画中逐渐缩放？目前，如果它被初始化并使用该值设置动画，它要么保持在 0.5，要么如果我将它初始化为 1 并在 0.5 设置动画，它会从 1 跳到 0.5。感谢您的帮助！
只需添加一个随进度变化的比例，例如 's ' + (1.2 - value / lenC) eg jsfiddle.net/ian_b/d0L8fbux/6
太好了，谢谢！我可以再问一个问题吗？ (1.2 - value / lenC) 减少了多少对象的大小？我最初试图以 100% 开始并以 70% 结束，但用数字替换“价值”似乎不起作用。
它会根据它在线路上的位置而有所不同，您只需要计算一些开始和结束大小的计算，然后计算路径长度从开始到结束的比例随着它的进展.只需根据需要进行调整。