¿Existe una posibilidad de transición fluida para el tamaño de fuente de animación en Raphael JS?

Question

Hasta ahora parece que no es fluido, pero entrecortado. P.ej. si tiene un atributo de estado con tamaño de fuente: 14 y quiere animar para indicar con tamaño de fuente: 16, la transición no se ve sin problemas.

Salta en 2 pasos. Primero cambia a 15 y luego a 16px.

¿Se puede forzar a que se vea más suave?

Estoy usando Firefox 14 para la prueba.

Mi código actual:

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

Eso es un problema conocido y no tiene nada que ver con Rafael, pero con sub-pixel rendering:

Cuando se ve en los navegadores que no admitan la GPU-Powered posicionamiento subpíxel, el texto parece saltar porque el texto debe crearse usando la CPU y las posiciones de cada letra se redondean al píxel entero más cercano.

pesar de que es posible con el nuevo CSS 3 animations se puede ver es sólo la fuente ampliación de la escala hasta que termine la animación y luego se ha vuelto a trazar.

Lamento que no tenga la solución para usted, pero hasta ahora no he visto una animación de tamaño de letra entrecruzada con CSS.

---

Pero lo que puede hacer para disimular este efecto un poco, es reducir el intervalo de tiempo de animación y ampliar la brecha de los tamaños de fuente. Los pasos aparecen en un marco de tiempo más rápido y uno no puede ver los pasos individuales.

See this fiddle

Answer 2

creo escalando el camino hasta sería más fácil y más suave, como:

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

Ver http://jsfiddle.net/SeeG2/40/ para más detalles.

Answer 3

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

Usted será capaz de ver una demo y descargar un plugin que escala el elemento. La advertencia es que no puede elegir explícitamente el tamaño de fuente de destino, pero, con un poco de matemática, puede escribir un pequeño complemento para convertir el tamaño del objetivo en un número para escalar.

Mi personal homepage hace uso de este complemento en la página de bienvenida, si desea ver otra demostración.

¡Buena suerte! :)

Answer 4

No conozco ninguna solución al usar el tamaño de fuente para modificar un elemento de texto, pero probablemente no tome ese enfoque de todos modos. En cambio, simplemente usaría la ruta cufonizada correspondiente al texto en cuestión y lo escalaría manualmente. Tenga en cuenta que esto es notablemente más suave que escalar manualmente un elemento de texto, al menos en Firefox.

1. Visita Cufón y convertir mi fuente preferida a su equivalente vectorial, seleccionando Raphael.registerFont como la opción de personalización;

2. Generar mi texto usando paper.print en lugar de paper.text. Esto devuelve un elemento de ruta en lugar de un elemento de texto.

3. zoom el elemento trayectoria resultante usando transformación en lugar de tamaño de fuente. Desde paper.print acepta un tamaño de fuente como un argumento, es fácil de calcular la escala deseada correspondiente a su objetivo de tamaño de fuente.

Aquí hay una rough demonstration que muestra cómo funciona (pongo el texto en un respaldo para que asoma más fácil). Espero que perdones sus numerosas insuficiencias; fue producido en un poco de prisa.