拉斐尔 - 哈弗动画

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');      
};