Question

我正在使用Snap.svg创建一些在悬停时设置动画的SVG。

这是一个非常简化的jsfiddle：

var s = Snap("#svg");
var smallCircle = s.circle(100, 150, 70);

//animation
function animateSVG(){
    smallCircle.animate({cy: 300}, 5000,mina.bounce);
    smallCircle.animate({fill:"red"},200);
}

//reset function?
function resetSVG(){
    // something here to reset SVG??
}

smallCircle.mouseover(animateSVG,resetSVG);

悬停/动画工作正常。

如果用户将鼠标从SVG上移开，目的是停止动画并返回原始SVG状态 - 这就是我目前卡住的地方。

我使用的实际SVG文件很复杂，因此希望快速“刷新”SVG，而不是手动将其移回原始位置和颜色

我假设有一种非常简单的方法可以做到这一点 - 似乎无法解决问题或在任何文档中找到答案。

希望有人可以提供帮助 - 如果可以，请提前感谢！

Answer 1

如果你只愿意在2个州之间制作动画，我发现Codrops animated svg icons在处理这种类型的snap.svg动画方面做得很好。我已经开始使用他们的代码作为我未来探索SNAP.SVG的基础。但回到代码：最有趣的部分是使用简单的JSON对象配置动画，例如：

plus : { 
    url : 'plus',
    animation : [
        { 
            el : 'path:nth-child(1)', 
            animProperties : { 
                from : { val : '{"transform" : "r0 32 32", "opacity" : 1}' }, 
                to : { val : '{"transform" : "r180 32 32", "opacity" : 0}' }
            } 
        },
        { 
            el : 'path:nth-child(2)', 
            animProperties : { 
                from : { val : '{"transform" : "r0 32 32"}' }, 
                to : { val : '{"transform" : "r180 32 32"}' }
            } 
        }
    ]
},

您可以轻松地为动画输入/输出附加任何类型的事件触发器。希望有所帮助。

Answer 2

就我个人而言，我可能会像下面这样做，将其存储在数据元素中。这取决于你真正想要克服的问题，你实际上是如何制作动画的（我怀疑它可能比我的某些动画解决方案更容易，但试图想到覆盖大多数基础的东西），如果你真的需要它重置，你动画了多少属性，以及是否还有其他东西......

var smallCircle = s.circle(100, 150, 70);
var saveAttributes = ['fill', 'cy'];

Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.resetSVG = function() {
      this.stop();
      for( var a=0; a<saveAttributes.length; a++) {
         if( this.data( saveAttributes[a] ) ) {
            this.attr( saveAttributes[a], this.data( saveAttributes[a] ) );   
         };
      };
    };

    Element.prototype.storeAttributes = function() {
      for( var a=0; a<saveAttributes.length; a++) {
        if( this.attr( saveAttributes[a]) ) {
            this.data( saveAttributes[a], this.attr( saveAttributes[a] ) );
        };
      };
    };

});

function animateSVG(){
    smallCircle.animate({cy: 300}, 5000,mina.bounce);
    smallCircle.animate({fill:"red"},200);
};

smallCircle.storeAttributes();
smallCircle.mouseover( animateSVG );
smallCircle.mouseout( smallCircle.resetSVG );

jsfiddle

在休假时，在悬停/重置SVG时捕捉SVG动画SVG

2 个答案: