Mi piacerebbe costruire una funzione comeSpostare un div in un percorso curvo (come l'interpolazione in Flash vecchi giorni)?
fromHeretoThere(x1,y1,x2,y2){
//....
}
modo che io possa spostare una <div> o un'immagine da un punto della pagina HTML ad un altro punto di una curva.
È possibile solo utilizzare Canvas? HTML5? qualche plugin/script che suggerisci?
Edit: Ecco un work in progress che confeziona il secondo concetto descritto in seguito come un oggetto JS riutilizzabile. È possibile modificare il codice o trascinare visivamente la curva per vedere il codice risultante:
http://phrogz.net/SVG/animation_on_a_curve.html
io personalmente uso SVG, il che rende questo tipo di cose (animazione lungo una curva di Bézier arbitraria) banale usando l'elemento <animateMotion>. Come bonus, puoi persino indurlo a calcolare la rotazione per te. Alcuni esempi:
Nota che non hanno nemmeno bisogno di effettivamente utilizzare SVG per visualizzare il risultato; potresti semplicemente creare un SVG fuori campo con questa animazione e campionare la trasformazione dell'elemento animato per ottenere il punto/la rotazione desiderata.
In alternativa (se non vuoi la rotazione, o vuoi calcolarla tu stesso mentre controlli la velocità di attraversamento) puoi creare un percorso SVG e usare semplicemente getPointAtLength()/getTotalLength() per trovare dove dovresti essere lungo il percorso a una determinata percentuale della distanza trasversale totale.Con questo non avrete nemmeno bisogno di un documento in formato SVG:
// Moving along an S curve from 0,0 to 250,450
var p = document.createElementNS('http://www.w3.org/2000/svg','path');
p.setAttribute('d','M0,0 C350,20 -200,400 250,450');
var len = p.getTotalLength();
for (var i=0;i<=100;i+=10){
var pct = i/100;
var pt = p.getPointAtLength(pct*len);
console.log(i, pt.x, pt.y);
}
// 0 0 0
// 10 65.54324340820312 10.656576156616211
// 20 117.17988586425781 49.639259338378906
// 30 120.2674789428711 114.92564392089844
// 40 100.49604034423828 178.4400177001953
// 50 78.06965637207031 241.1177520751953
// 60 63.526206970214844 305.9412841796875
// 70 74.59959411621094 370.6294860839844
// 80 122.1227798461914 415.8912658691406
// 90 184.41302490234375 438.8457336425781
// 100 250 450
Ora tutto ciò che dovete fare è impostare il .style.top e .style.left del vostro <div> o <img> in modo appropriato. L'unica parte "difficile" è decidere cosa assomigliare alla curva e definire where to put the handles.
quindi come faccio ad usare questo codice? per favore chi l'ha mai fatto, mettilo in github con le spiegazioni. Sembra fantastico, ma ho solo bisogno della possibilità di impostare una curva per un elemento animato, non ho bisogno di tutto questo trascinamento dell'SVG .. – vsync
@vsync Cerca nella grande casella "CODICE" su quella pagina per il codice JavaScript che puoi copiare/incollare. – Phrogz
hmm ma questo è DAVVERO primitivo..it non ti permette di impostare un percorso con più di 2 punti .... – vsync
È possibile utilizzare almeno:
CSS3 è probabilmente il più facile, ma sarebbe JavaScript essere il browser più compatibile.
Si potrebbe anche voler guardare qualcosa di simile:
Che cosa è che si sta cercando di fare?
talvolta googling è facile:
Utilizzando la funzione di passaggio di jQuery animate è possibile animare in qualsiasi curva desiderata.
Per alcune cose, l'utilizzo di una tela è migliore, ma per la maggior parte delle animazioni piccole e semplici è sufficiente modificare i valori css con jQuery (questo è ciò che fa animare) è più veloce e più semplice.
Ecco una rapida dimostrazione che ho fatto, costruito sulla cima del plugin jQuery.path: http://jsfiddle.net/zVddG/
ho detto un percorso curvo – Francesco
Vedere questa domanda: http://stackoverflow.com/questions/2240052/how-would -you-animate-something-so-that-it-segue-a-curve – bjudson