Gibt es in Raphael JS eine fließende Übergangsmöglichkeit für die Animationsschriftgröße?

Question

Bisher scheint es es ist nicht fließend, aber abgehackt. Z.B. Wenn Sie ein Zustandsattribut mit der Schriftgröße: 14 haben und animieren möchten, um mit der Schriftgröße: 16 anzugeben, sieht der Übergang nicht glatt aus.

Es springt in 2 Schritten. Zuerst zu 15 und dann zu 16px wechseln.

Kann es gezwungen werden, glatter auszusehen?

Ich verwende Firefox 14 zum Testen.

Mein aktueller Code:

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

Das ist ein bekanntes Problem und hat nichts mit Raphael zu tun, sondern mit sub-pixel rendering:

Wenn in Browsern, die nicht GPU-powered unterstützen Bei der Subpixelpositionierung scheint der Text zu springen, da der Text mit der CPU erstellt werden muss und die Positionen jedes Buchstaben auf das nächste ganze Pixel gerundet werden.

Auch wenn es mit den neuen CSS 3 animations möglich ist, können Sie sehen, es ist Upscaling nur die Schriftart, bis die Animation beendet ist und es dann neu gezeichnet.

Es tut mir leid, dass ich keine Lösung für Sie habe, aber ich habe bis jetzt keine reibungslose browserübergreifende Schriftgrößenanimation mit CSS gesehen.

---

Aber was du diesen Effekt etwas zu verschleiern tun kann, ist die Animation Intervallzeit und die Kluft der Schriftgrößen zu reduzieren. Die Schritte erscheinen dann in einem schnelleren Zeitrahmen und man kann die einzelnen Schritte nicht sehen.

See this fiddle

Answer 2

Ich denke, den Weg Skalierung würde auf einfache und glatter sein, wie:

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

Siehe http://jsfiddle.net/SeeG2/40/ für weitere Einzelheiten.

Answer 3

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

können Sie eine Demo sehen, und ein Plugin herunterladen, die das Element skaliert. Der Nachteil ist, dass Sie nicht explizit die Zielschriftgröße wählen müssen, aber mit ein wenig Mathematik können Sie ein kleines Plugin schreiben, um die Zielgröße in eine Zahl zu konvertieren, nach der skaliert werden soll.

Mein personal homepage nutzt dieses Plugin auf der Begrüßungsseite, wenn Sie eine weitere Demo sehen möchten.

Viel Glück! :)

Answer 4

Ich kenne keine Lösung mit Schriftgröße, um ein Textelement zu ändern, aber ich würde wahrscheinlich diesen Ansatz sowieso nicht nehmen. Stattdessen würde ich einfach den dem betreffenden Text entsprechenden Pfad verwenden und ihn manuell skalieren. Bitte beachten Sie, dass dies spürbar glatter ist als die manuelle Skalierung eines Textelements, zumindest in Firefox.

1. Besuchen Cufón und meine bevorzugte Schriftart seinen Vektor Äquivalent umwandeln, die Auswahl Raphael.registerFont als die Anpassung Option;

2. Generieren Sie meinen Text mit paper.print anstelle von paper.text. Dies gibt ein Pfadelement anstelle eines Textelements zurück.

3. Vergrößern Sie das resultierende Pfadelement mithilfe der Transformation anstelle der Schriftgröße. Da paper.print eine Schriftgröße als Argument akzeptiert, ist es einfach, die gewünschte Skalierung entsprechend Ihrer Zielschriftgröße zu berechnen.

Hier ist ein rough demonstration zeigt, wie es funktioniert (Ich habe den Text auf einem Träger für eine einfachere Schweben). Ich hoffe, Sie werden seine zahlreichen Unzulänglichkeiten verzeihen; es wurde in einer Eile produziert.