Question

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

参见此处示例：

当您将鼠标悬停在方格上时，它会向上缩放，当您停止悬停时，它会缩小。

问题是：当你在元素仍然按比例放大的情况下停止悬停在元素上时，它会开始按比例缩小，并且最终会比原来的要小。

当您将鼠标悬停在元素上，然后立即将鼠标移出它时，您可以看到。

以下是我用于悬停动画的功能：

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

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

我修改了your jsFiddle：

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

拉斐尔 - 哈弗动画

2 个答案: