Có khả năng chuyển đổi thông thạo cho kích thước phông chữ hoạt ảnh trong Raphael JS không?

Question

Cho đến nay có vẻ như nó không thông thạo, nhưng choppy. Ví dụ. nếu bạn có một thuộc tính trạng thái với kích thước phông chữ: 14 và muốn tạo hiệu ứng động cho trạng thái có kích thước phông chữ: 16, thì quá trình chuyển đổi không mượt mà.

Nó nhảy theo 2 bước. Thay đổi đầu tiên thành 15 và sau đó là 16px.

Nó có bị buộc phải trông mịn hơn không?

Tôi đang sử dụng Firefox 14 để thử nghiệm.

mã hiện tại của tôi:

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

Answer 1

Đó là một vấn đề được biết đến và không có gì để làm với Raphael nhưng với sub-pixel rendering:

Khi xem trong các trình duyệt không hỗ trợ GPU-powered định vị phụ pixel, văn bản xuất hiện để nhảy vì văn bản cần được tạo bằng cách sử dụng CPU và vị trí của từng chữ cái được làm tròn tới toàn bộ pixel gần nhất.

Mặc dù có thể với CSS 3 animations mới, bạn có thể thấy nó chỉ nâng cấp phông chữ cho đến khi hoạt ảnh kết thúc và sau đó được vẽ lại.

Tôi rất tiếc vì tôi không có giải pháp cho bạn, nhưng tôi chưa thấy một hoạt ảnh có kích thước phông chữ ngang mượt mà với CSS cho đến bây giờ.

---

Nhưng bạn có thể làm gì để che giấu hiệu ứng này một chút, là giảm khoảng thời gian hoạt ảnh và mở rộng khoảng cách của kích thước phông chữ. Các bước sau đó sẽ xuất hiện trong khung thời gian nhanh hơn và không thể thấy các bước đơn lẻ.

See this fiddle

Answer 2

Tôi nghĩ rộng con đường lên sẽ dễ dàng hơn và mượt mà hơn, như:

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

Xem http://jsfiddle.net/SeeG2/40/ để biết chi tiết.

Answer 3

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

Bạn sẽ có thể để xem một bản demo và tải về một plugin mà quy mô nguyên tố này. Thông báo trước là bạn không được chọn rõ ràng kích thước phông chữ đích, nhưng, với một phép toán nhỏ, bạn có thể viết một plugin nhỏ để chuyển đổi kích thước đích thành một số để mở rộng.

My personal homepage sử dụng plugin này trên trang chào mừng, nếu bạn muốn xem một bản trình diễn khác.

Chúc may mắn! :)

Answer 4

Tôi biết không có giải pháp nào bằng cách sử dụng cỡ chữ để sửa đổi phần tử văn bản, nhưng có lẽ tôi sẽ không sử dụng phương pháp đó. Thay vào đó, tôi chỉ đơn giản sử dụng đường dẫn cufónized tương ứng với văn bản được đề cập và mở rộng theo cách thủ công. Xin lưu ý rằng điều này là đáng chú ý mượt mà hơn là mở rộng quy mô một phần tử văn bản theo cách thủ công, ít nhất là trong Firefox.

1. Hãy truy cập Cufón và chuyển phông chữ ưa thích của tôi thành véc tơ tương đương, chọn Raphael.registerChọn làm tùy chọn tùy chỉnh;

2. Tạo văn bản của tôi bằng cách sử dụng paper.print thay vì paper.text. Điều này trả về một phần tử đường dẫn thay vì một phần tử văn bản.

3. Thu phóng phần tử đường dẫn kết quả bằng cách sử dụng phép biến đổi thay vì kích thước phông chữ. Vì paper.print chấp nhận kích thước phông chữ làm đối số, nên dễ dàng tính toán tỷ lệ mong muốn tương ứng với kích thước phông chữ mục tiêu của bạn.

Hiển thị cách hoạt động (Tôi đặt văn bản trên bản sao lưu để di chuột dễ dàng hơn). Tôi hy vọng bạn sẽ tha thứ cho những bất cập của nó; nó đã được sản xuất trong một chút vội vàng.