Question

当用户将气球svg悬停时，我想为气球svg制作动画（使其更大）。
当用户打开气球时，气球将恢复原来的尺寸。

我用它将它重置为原始大小和位置。

transform: 's1'

它适用于chrome，firefox，safari。
但是当我在IE上尝试它时，扩展动画工作，但重置动画不起作用，它没有动画就闪烁到原始大小。

$baloonColumn.on('mouseenter', function() {
    animateExpandBaloon();
});

$baloonColumn.on('mouseleave', function() { 
    animateNormalBaloon();  
});

var animateExpandBaloon = function() {
    baloonShout.animate({
        transform: 's1.1T5,10'
    }, 1000, mina.elastic);

    baloon.animate({
        transform: 's1.05T'
    }, 1200, mina.elastic);

    baloonRightEye.animate({
        transform: 's1T3,-2'
    }, 1200, mina.elastic);

    baloonLeftEye.animate({
        transform: 's1T3,-2'
    }, 1200, mina.elastic);

    baloonTail.animate({
        transform: 's1T15,0'
    }, 1200, mina.elastic);

    baloonMouth.animate({
        transform: 's1.15T'
    }, 1200, mina.elastic);
}

var animateNormalBaloon = function() {
    baloonShout.animate({
        transform: 's1'
    }, 1000, mina.elastic);

    baloon.animate({
        transform: 's1'
    }, 1200, mina.elastic); 

    baloonRightEye.animate({
        transform: 's1'
    }, 1200, mina.elastic);

    baloonLeftEye.animate({
        transform: 's1'
    }, 1200, mina.elastic);

    baloonTail.animate({
        transform: 's1'
    }, 1200, mina.elastic);

    baloonMouth.animate({
        transform: 's1'
    }, 1200, mina.elastic);
}

元素应该如何正确地设置为原始大小和位置？

Answer 1

首先我认为你应该使用Snap悬停功能; http://snapsvg.io/docs/#Element.hover

我确实做了同样的事情我非常肯定，我通过设置动画元素的自定义属性找到了我的方法。我需要许多不同的状态，这可能不是最优雅的解决方案，但它可以工作，并且svg规范允许在路径上设置自定义属性。由于我正在设置动态转换我的svg数据，我能够在创建时设置attrs。

那么，它是怎么来的;

element.attr('state-static',my-static-state-string);

然后;

element.hover(
    function(){
        element.animate('transform':'T15,0');
    },function(){
        element.animate('transform':element.attr('state-static'));
    })

如果这有助于你，请告诉我

snap svg动画到原始大小和位置

1 个答案: