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/

Answer 2

无需将变换附加到两个动画中的所有现有变换（使用“...”），您只需重置绝对变换（至少在其中一个动画中）。这样做的缺点是您必须重复初始翻译字符串，但我想它的优点是更明确。

我修改了你的 jsFiddle：

hoverFunc = function() {
    rect.animate({transform: "...S1.6,1.6"}, 1000, 'bounce');
};
hideFunc = function() {
    rect.animate({transform: "t20, 20"}, 1000, 'bounce');      
};