Snap.svg动画图标上的奇怪行为

Question

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

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

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

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

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

非常感谢你的帮助！

雨果

Answer 1

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

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

Answer 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);
        });
};