使用snap.svg进行简单翻译

Question

我刚开始研究动画svg图形，看起来非常复杂。

我陷入了一个看似简单的问题。 我想将元素设置为新地方的动画，但我想在设定的时间内完成。

当我改变我尝试使用我当前的代码我得到一个矩阵属性出现，但我无法修改它，有没有人知道如何从设定的时间的左侧到右侧动画对象。

                 window.onload = function () {
                     var s = Snap(100, 100);
                     Snap.load("http://new.beresponsive.co.za/wp-content/themes/responsive/flatui/images/icons/responsive.svg", function (f) {

                         redSomething = f.select("#phone");

                         redSomething.hover(function () {
                             redSomething.animate({
                                 'transform': 'matrix(3.333, -0.000, 0.000, 3.333, 66.667, 66.667)'
                             }, 2000);
                         });

                         s.append(f);
                     });

                 };

Answer 1

我觉得它感觉很复杂，因为你正在使用矩阵，我不明白为什么你需要它。 “简单”的解决方案就是做

redSomething.animate({ transform: 't100,0' }, 2000);

在字符串't'= translate中，100,0向右移动x 100。

注意，如果你已经应用了一个变换，你可以尝试在当前结束时添加字符串，但是如果它已经旋转了或者你想让它向右移动它有点棘手。