0

我刚开始研究动画 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);
                     });

                 };
4

1 回答 1

2

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

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

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

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

于 2014-02-15T09:18:12.107 回答