Raphael JS中有動畫字體大小的流暢轉換嗎？

到目前爲止，它似乎是它不流利，但波濤洶涌。例如。如果您有一個font-size爲14的狀態屬性，並且想要使用font-size：16設置動畫狀態，則轉換看起來並不平滑。Raphael JS中有動畫字體大小的流暢轉換嗎？

它跳兩步。首先更改爲15，然後更改爲16px。

它可以被迫看起來更光滑？我使用Firefox 14進行測試。

我當前的代碼：

var fillerText = { 
     "fill" : "#00738f", 
     "font-size": 14, 
     "font-family": "Arial, Helvetica, sans-serif" 
     } 
    var fillerTextHover = { 
     "fill" : "#00738f", 
     "font-size": 16, 
     "font-family": "Arial, Helvetica, sans-serif", 
     "cursor": "pointer" 
     } 

text.hover(function() { 
     text.animate(fillerTextHover, 500); 
       }, 
    function() { 
     text.animate(fillerText, 500); 
      } 
);

來源

2012-07-25 Derfder

我們需要查看代碼才能幫助您。 – 2012-07-25 08:15:39

我已經添加了代碼，使其更清楚我的意思 – Derfder 2012-07-25 09:00:33

任何人都可以知道如何解決它？ – Derfder 2012-07-26 06:20:39

這是一個已知的問題，無關與拉斐爾但sub-pixel rendering：

當不支持GPU供電的瀏覽器中查看子像素定位，因爲需要使用CPU創建文本，並且每個字母的位置都被四捨五入到最接近的整個像素，所以文本看起來會跳躍。

即使它可能與新CSS 3 animations你可以看到它只是按比例放大的字體，直到動畫結束，那麼它的重繪。

對不起，我沒有解決方案給你，但我還沒有看到一個平滑的跨瀏覽器字體大小動畫與CSS直到現在。

但是你可以做掩飾這種效果有點什麼，是降低動畫間隔時間和擴大字體大小的差距。這些步驟隨後出現在更快的時間範圍內，並且看不到單個步驟。

See this fiddle

來源

2012-07-29 14:01:29

+1這個不錯的解決方法。 – 2012-07-29 17:35:22

我想縮放路徑最多會更容易和更順暢，如：

text.hover(function() { 
    text.animate({transform: "s1.5 1.5 "}, 400); 
}, function() { 
    text.animate({transform: "s1.0 1.0 "}, 400); 
});

見http://jsfiddle.net/SeeG2/40/瞭解詳情。

來源

2012-07-29 14:28:44 Qnan

退房http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

您將可以看到一個演示並下載縮放元素的插件。需要注意的是，你沒有明確地選擇目標字體大小，但是，用一點數學算法，你可以編寫一個小插件來將目標大小轉換爲數字來縮放。

我的personal homepage在歡迎頁面上使用這個插件，如果你想看另一個演示。

祝你好運！ :)

來源

2012-07-29 16:00:06

我知道沒有解決方案使用字體大小來修改文本元素，但我可能不會採取這種方法。相反，我會簡單地使用與所討論文本對應的cufónized路徑並手動縮放它。 請注意這比手動縮放文本元素明顯更流暢，至少在Firefox中。

訪問Cufón和我的優選的字體轉換爲它的等效向量，選擇Raphael.registerFont作爲定製選項;
使用paper.print而不是paper.text生成我的文本。這會返回一個路徑元素而不是文本元素。
使用轉換而不是字體大小縮放得到的路徑元素。由於paper.print接受字體大小作爲參數，所以很容易計算與目標字體大小相對應的所需比例。

這裏是展示它是如何工作（我把背的文字更容易懸停）一個rough demonstration。我希望你能赦免它的許多不足之處;它是在一陣急促中產生的。

來源

2012-07-31 23:55:26

Raphael JS中有動畫字體大小的流暢轉換嗎？

回答

相關問題