简单翻译与snap.svg

我刚开始寻找动画svg图形，它似乎很复杂。简单翻译与snap.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); 
        }); 

       };

来源

2014-02-14 Zackskeeter

我觉得它感觉很复杂，因为您使用的是矩阵，我不明白为什么您需要这里。在“简单”的解决办法是只是做

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

在字符串“T” =转换和100,0是移动×100的权利。

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

来源

2014-02-15 09:18:12 Ian

谢谢，你知道你怎么也翻译翻译，所以当你将鼠标悬停时它会返回到原来的位置 – Zackskeeter

它只是对原始点进行动画处理，所以resSomething.animate（{transform：'t0,0 '}，2000）;您可能需要检查在动画完成之前如果您从悬停关闭转到悬停状态，会发生什么情况，因为有时会出现烦人的位。 – Ian

简单翻译与snap.svg

回答

相关问题