拉斐尔 - 悬停动画

Question

我试图让你有一个动画时，你悬停在拉斐尔元素。

见这里的例子：

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

而是追加变换到所有现有的转换在这两个动画（使用“...”），你可以只重置绝对转换（至少在一个动画中）。这有不利之处，你必须重复初始翻译字符串，但我认为它具有更明确的优势。

我修改your jsFiddle：

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