HyphotesisAnimazione personalizzata in Raphaël.js
ho alcuni cerchi su un percorso (vedi figura avviare in figura) e hanno bisogno di animare un altro percorso (figura fine in figura).
Ci sono diverse azioni l'animazione deve fare:
- spostare l'intera forma alla nuova posizione
- modificare il percorso
- diminuire tutti i raggi cerchio
La figura:
Problema
Raphael.js sa ow per animare i cerchi dalle coordinate originali a quelle finali cambiando anche il raggio. Poiché l'animazione non viene eseguita su un percorso simile a quello originale e finale, l'animazione non sembra molto buona. I cerchi vanno da x1, y1 a x2, y2 in linea retta.
Quello che ho cercato
Facendo l'animazione straight-forward, spostando i cerchi dall'inizio alla fine, cambiando il raggio. Come ho detto, non va bene.
Spostare ogni cerchio in intervalli, calcolare il nuovo percorso a ogni iterazione e calcolare la posizione dei cerchi. Questo funziona molto lentamente.
Calcolo di una posizione del cerchio temporaneo su ciascuna iterazione con Element.getPointAtLength(). Anche questo è molto lento.
Avere alcuni percorsi intermedi codificati in array e eseguire l'animazione attraverso ciascuno di essi. Questo è migliore in termini di velocità ma sembra di tipo a scatti
Quindi, qualche idea?
vorrei anche come una risposta a questa domanda ... sto facendo un orologio per l'insegnamento, e ho bisogno un arco per animare agevolmente lungo la linea dell'arco. Come nel tuo caso, però, salta direttamente al nuovo punto: http://jsfiddle.net/zFXCb/10/ Se trovo una soluzione, invierò una risposta. –