拉斐爾 - 懸停動畫

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