3

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

一个非常简化的jsfiddle在这里：

http://jsfiddle.net/62UA7/2/

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 的方法，而不是手动将其移回原始位置和颜色

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

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

4

2 回答 2

2

如果您只愿意在两种状态之间制作动画，我发现Codrops 动画 svg 图标在处理这种类型的 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"}' }
            } 
        }
    ]
},

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

于 2014-05-27T16:39:31.210 回答
0

就我个人而言，我可能会这样做，将其存储在数据元素中。不过，这取决于您真正要克服的问题，实际动画的方式（我怀疑它可能比我使用某些动画的解决方案更容易，但尝试考虑涵盖大多数基础的东西），以及您是否真的需要它重置，还有你正在制作动画的属性数量以及是否还有其他事情发生......

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

于 2014-05-01T12:54:46.240 回答