使用 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。

注意，如果您已经应用了转换，您可以尝试在当前转换的末尾添加字符串，但如果它已经旋转或您希望它向右移动，它会有点棘手。