javascript - 拉斐尔 - 悬停动画

Question

当您将鼠标悬停在 raphael 元素上时，我试图制作一些动画。

看这里的例子:

http://jsfiddle.net/GVEqf/24/

当您将鼠标悬停在正方形上时它会放大，当您停止悬停时它会缩小。

问题是:当您停止将鼠标悬停在仍在放大的元素上时，它会开始缩小，最终会比原来小。

当您将鼠标悬停在该元素上然后立即将鼠标移出它时，您会看到这一点。

以下是我用于悬停动画的函数:

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
    rect.animate({transform: "...s0.625,0.625"}, 1000, 'bounce');      
};

Answer 1

我会将转换保存到 var 并转换到原始状态:

var canvas = Raphael(document.getElementById("canvas"), 250, 250);

var rect = canvas.rect(1, 1, 50, 50);
rect.attr({'fill': 'black'});

rect.transform("t20, 20");

var origionalForm = rect.transform(); // remember current transform

hoverFunc = function() {
    rect.animate({transform: "...s1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
    rect.animate({transform: origionalForm.toString()}, 1000, 'bounce'); // back to origional state      
};
rect.hover(hoverFunc, hideFunc);

演示:http://jsfiddle.net/GVEqf/27/