javascript - demos - Raphael SVG animaciones entrecortadas en algunos navegadores
raphael js demos (1)
Tengo un objeto SVG que estoy agregando a mi página usando Raphael. Con aproximadamente 175 caminos en 6 sets sospecho que cuenta como complejo.
Estoy animando cada uno de los 6 sets usando la función .animate.
function anim(direction, duration){
return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000)); // 25 paths
$(window).load(function(){
IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">"); // 32 paths
IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">"); // 29 paths
IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}
El problema es que en algunos navegadores, esto es muy entrecortado.
Es suave como la mantequilla en Mac (probado: FF, Chrome, Safari). También es hermoso en Windows en Chrome, pero cuando subo Windows FF, Safari o IE8, las animaciones son entrecortadas y un poco entrecortadas.
Incluso se ve muy bien en un iPad!
Me encantaría poder hacer que todos se vean geniales ... así que estoy tratando de averiguar qué está costando todo el poder en FF y Safari (y al final del día, espero que cualquier anulación que administre traiga un corregir para IE8 también).
De las otras preguntas que he visto sobre animación entrecortada en Raphael, veo la mención de "meterse en las entrañas" para agregar un tiempo de espera a la función animada ... (como se ve en raphael-min.js)
cz= window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(a){setTimeout(a,16)}, /* there is a function here that animates */
Aunque parece que en FF, por ejemplo, RequestAnimationFrame ofrece un rendimiento más suave que setTimeout. (Lo probé eliminando la condición mozRequestAnimationFrame y recargando, probé varios intervalos para el tiempo de espera)
¿Hay algo más que pueda faltar que pueda ayudar a mejorar las velocidades de fotogramas de mis navegadores?
Tenga en cuenta que, por ejemplo, la imagen tiene su valor predeterminado de 500x500 y la rotación se produce alrededor del centro de la imagen (punto 250x250), sin embargo, la imagen se muestra en la página en 1000x1000 (con la ventana gráfica haciendo la escala en la carga de la página.
¿Es posible que si el diseñador cambia el tamaño de la imagen a un lienzo de 1000x1000 y muestro a tamaño completo desde el principio, tenga un impulso? Tal vez un "paseo más suave"? No estoy seguro de qué factores afectan la animación y el rendimiento de SVG.
Debe buscar en Element.animateWith ( http://raphaeljs.com/reference.html#Element.animateWith ). Tiene una característica que le permite sincronizar una animación con otra para que todo se actualice en el paso de bloqueo. El picado no puede ayudar si el navegador o el dispositivo son lentos, pero la sincronización de las animaciones debería hacer que se vea mejor.