带有 Snap.svg 的动画图标的奇怪行为答案

【问题标题】：Strange behavior on animated icon with Snap.svg带有 Snap.svg 的动画图标的奇怪行为
【发布时间】：2016-02-11 02:16:32
【问题描述】：

我正在尝试使用 Snap.svg 为搜索图标设置动画。您可以看到here on my Codepen，即搜索图标。

我使用变换比例让我的图标在每次点击时“弹跳”：loupe.animate({transform: 's1.2s.8'},300,mina.easeout);

动画运行良好，除了第一次点击，它只是按比例缩小，然后第二次点击效果还可以。

刷新图标的行为相同（在笔的底部），虽然我在动画之前重置了变换，但旋转动画在第一次点击时转向错误。

我想也许我的图标在第一次点击之前没有缩放并旋转到合适的位置，但我找不到可以检查/设置的位置。

非常感谢您的帮助！

雨果

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

使用大写字母使用绝对值：

loupe.animate({transform: 'S1.2S.8'},300,mina.easeout);

【讨论】：

我已经尝试过了，但我仍然会在第一次点击时获得动画，但行为错误。然后在其他人点击时，动画运行良好。
然后我的直觉说问题出在代码的其他地方。该特定行应按原样工作。你能包含一些代码吗？
是的，你可以在这个 codepen 上找到代码（包含在我的第一篇文章中）：codepen.io/Hugo8705/pen/MagpQb

【解决方案2】：

对于刷新图标，将旋转从R180 更改为R-180，将R360 更改为R0。这似乎一直有效。

clicRefresh = function() {
    fleche.stop().animate({transform: 'S.6,.6 R-180 114.75 122.5'}, 400, mina.easeout, function() {
            fleche.stop().animate({transform: 'S1,1 R0 114.75 122.5'}, 600, mina.easeout);
        });
};

【讨论】：