HyphotesisPersonalizar animación en Raphael.js
Tengo algunos círculos en un camino (ver Puesta en forma en la figura) y que necesitan para animar a otra ruta (forma final en la figura).
Hay varias acciones de la animación debe hacer:
- mover toda la forma a la nueva posición
- cambiar la ruta
- disminuir todas las radios del círculo
La figura:
Problema
Raphael.js sabe h Cómo animar los círculos desde las coordenadas originales hasta las finales también cambiando el radio. Debido a que la animación no se ejecuta en una ruta similar a la original y final, la animación no se ve muy bien. Los círculos van de x1, y1 a x2, y2 en línea recta.
Lo que intenté
Haciendo la animación recta hacia adelante, moviendo los círculos de principio a fin, cambiar el radio. Como dije, esto no está bien.
Moviendo cada círculo en intervalos, calculando la nueva ruta en cada iteración y calculando la posición de los círculos. Esto funciona muy lento.
Cálculo de una posición de círculo temporal en cada iteración con Element.getPointAtLength(). Esto también es muy lento.
Tener unas pocas rutas intermedias codificadas en matrices y ejecutar la animación a través de cada una. Esto es mejor en términos de velocidad, pero parece un poco desigual
¿Alguna idea?
También me gustaría una respuesta a esta pregunta ... Estoy haciendo un reloj para la enseñanza, y necesito un arco para animar suavemente a lo largo de la línea de arco. Sin embargo, como en su caso, salta directamente al nuevo punto: http://jsfiddle.net/zFXCb/10/ Si encuentro una solución, publico una respuesta. –