0

当用户将 baloon svg 悬停时，我想为 baloon 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);
}

应该如何正确地将元素动画到原始大小和位置？

4

1 回答 1

0

首先我认为你应该使用 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'));
    })

让我知道这是否对您有帮助

于 2014-03-28T16:52:44.607 回答