me gustaría construir una función comoMueve un div en una ruta curva (como la interpolación en Flash en los viejos tiempos)?
fromHeretoThere(x1,y1,x2,y2){
//....
}
De modo que pueda mover un o una imagen <div> de un punto en la página HTML a otro punto en una curva.
¿Esto solo se puede hacer usando Canvas? HTML5? ¿Algún plugin/scripts que sugiera?
Editar: Aquí hay un trabajo en progreso que empaqueta el segundo concepto se describe a continuación como un objeto JS reutilizable. Puede editar el código o arrastre visualmente la curva para ver el código resultante:
http://phrogz.net/SVG/animation_on_a_curve.html
que haría uso personal SVG, lo que hace este tipo de cosas (la animación a lo largo de una curva de Bézier arbitraria) trivial utilizando el elemento <animateMotion>. Como beneficio adicional, incluso puede hacer que calcule la rotación por usted. Algunos ejemplos:
Observe que no tienen ni siquiera para utilizar realmente SVG para mostrar el resultado; Simplemente podría crear un SVG fuera de la pantalla con esta animación y probar la transformación del elemento animado para obtener su punto/rotación deseada.
Alternativamente (si no desea la rotación, o desea calcularla usted mismo mientras controla la velocidad de recorrido) puede crear una ruta SVG y simplemente usar getPointAtLength()/getTotalLength() para encontrar dónde debe estar a lo largo de la ruta en un porcentaje dado de la distancia transversal total.Con esto, usted ni siquiera necesita un documento 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
Ahora todo lo que tiene que hacer es establecer la .style.top y .style.left de su <div> o <img> adecuadamente. La única parte "difícil" es decidir cómo se ve la curva y definir where to put the handles.
entonces, ¿cómo uso este código? por favor, quien haya hecho esto, póngalo en github con explicaciones ... se ve increíble, pero solo necesito la capacidad de establecer una curva en un elemento animado, no necesito todo este arrastre del SVG .. – vsync
@vsync Busque en el cuadro grande "CÓDIGO" en esa página el código JavaScript que puede copiar/pegar. – Phrogz
hmm pero esto es REALMENTE primitivo ... no le permite establecer un camino con más de 2 puntos .... – vsync
Puede utilizar al menos:
CSS3 es probablemente el más fácil, pero JavaScript lo harías ser el más compatible con el navegador
También puede que desee ver en algo como esto:
Qué es lo que estás tratando de hacer?
veces buscando en Google es más fácil:
Utilizando la función de paso de jQuery animate puede animar en cualquier curva que desee.
Para algunas cosas, usar un lienzo es mejor, pero para la mayoría de las animaciones pequeñas y simples simplemente cambiando los valores de css con jQuery (esto es lo que hace el animado) es más rápido y simple.
He aquí una demostración rápida que hice, construido en la parte superior del plugin jQuery.path: http://jsfiddle.net/zVddG/
dije una trayectoria curva – Francesco
Ver esta pregunta: http://stackoverflow.com/questions/2240052/how-would -tu-anima-algo-así-que-sigue-una-curva – bjudson