Question

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

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

当我改变时，我尝试使用我当前的代码，我会看到一个矩阵属性，但是我无法修改它，有没有人知道如何在一定时间内从左到右动画一个对象。< / p>

                 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。

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

使用snap.svg进行简单翻译

1 个答案: