Conceptos del Camino de Animación:
De un punto de vista de programación, haciendo animación utilizando un camino o una línea de tiempo es como hacer un engaño, todo lo que hay que hacer es definir un camino para que la capa lo siga, y solo circula en cada punto con solo moverlo allí en lugar de calcular adonde moverlo. Esto tiene unas grandes ventajas porque toma poco tiempo del CPU (así que van realmente ligero) y puedes mover la capa en cualquier forma que puedas pensar. La desventaja, es que no puedes fácilmente cambiar el camino como puedes hacer en una animación calculada. Si necesitas cambiarla, tienes que ir de vuelta y cambiar todos los puntos en tu camino. Como sea, habiendo dicho eso, utilizando un camino continúa siendo una forma fácil para hacer una animación.
La técnica básica para hacer un camino de animación es fácil de comprender. Una vez que tengas todos los coordinadores de donde hay que mover la capa, solamente necesitas una función para que puedas circular alrededor de estos y mover la capa a estos puntos. Para este propósito he escrito un Camino Objeto el cual se ocupará de esto para ti. Solamente tendrás que agregar el objeto a tus DynLayers y utilizar los métodos apropiados.
El único problema es de hacer los coordinadores para tu camino. Hay algunos productos comerciales los cuales harán esto para ti como por ejemplo Macromedia Dreamweaver o mBed Interactor . Estas piezas de software auto generaran todo el código para ti y requieren sus mismos bibliotecas enormes ficheros. Y si deseas tú mismo editar el código JavaScript tendrás que invertir bastante tiempo para saber exactamente lo que esta pasando. Si solamente lo que quieres hacer es un camino de animación en una pequeña demostración, pagar unos doscientos dólares parece un poco caro. Y es por eso que he diseñado una pequeña herramienta, llamada DuoPath, la cual a) no cuesta nada b) hace más fácil para hacer todos los coordinadores, y c) te permite hacer toda la codificación así que podrás comprender lo que esta pasando y fácilmente puedes cambiarlo a tus necesidades. La próxima Lección mostrara de como utilizar DuoPath, así que continuare asumiendo que nosotros ya hemos creado nuestro camino y tenemos todos los coordinadores listos para ir.
Aquí se encuentran los coordinadores para el camino el cual he hecho con DuoPath:
x-coords: 101,105,113,122,131,140,149,156,157,156,155,157,163,172,181,188,196,203,208,215,221,227,234,243,252, 261,270,278,287,296,303,310,315,319,321,322,322,322,322,323,328,335,345,355,368,377,385,390,392,393, 394,391,387,381,377,376,376,378,382,386,391,398,406,414,424,434,442,453,461,468,471,474,475,476,476, 475,474,473,472,472,476,481,488,498,508,515,523,529,536,539,542,542,541,539,535,529,523,517,514,513, 513,520,530,540,552,564,574,579,581,580,576,567,555,540,521,501,479,459,441,422,404,384,366,349,330, 310,291,272,254,238,222,206,188,172,157,141,128,113,102,92,82,72,63,55,48,42,36,32,29,27,29,32,39, 48,59,67,74,81,87,91,97 y-coords: 285,271,255,242,230,225,225,233,242,253,265,275,281,284,280,269,256,239,224,208,194,181,168,154,143, 135,129,126,124,125,127,130,135,140,149,161,174,192,208,229,250,269,281,286,284,277,269,259,248,237, 222,202,183,164,147,133,120,108,99,92,86,81,78,76,77,82,90,100,116,136,157,177,200,225,249,270,289, 306,323,341,354,365,371,376,376,374,368,361,351,340,324,309,295,281,269,257,245,231,218,202,185,170, 159,153,148,142,133,120,106,92,80,69,59,50,44,40,37,35,34,34,34,36,37,39,42,46,50,54,60,67,76,84,95, 105,116,128,140,153,166,176,187,200,212,224,237,250,264,279,295,310,326,341,351,357,355,350,342,331, 320,310,299
Como puedes ver hay como un millón de estos. Pero no importa de cuantos puntos hay allí porque si recuerdas camino de animación no toma tiempo del CPU, así que no hay problema en hacer muchos puntos. Cada conjunto de coordinadores representa un punto en el camino. El primer valor X y el primer valor Y hacen el punto primero y así continua. Con solo asignar estos números a un array este estará disponible de accesar cualquier conjunto solo con solo utilizar los índices:
path1x = new Array(101,105,113,122,131,140,149,156,157,156,155,157,163,172,181,188,196,203,208,215,221,227,234,243, 252,261,270,278,287,296,303,310,315,319,321,322,322,322,322,323,328,335,345,355,368,377,385,390,392, 393,394,391,387,381,377,376,376,378,382,386,391,398,406,414,424,434,442,453,461,468,471,474,475,476, 476,475,474,473,472,472,476,481,488,498,508,515,523,529,536,539,542,542,541,539,535,529,523,517,514, 513,513,520,530,540,552,564,574,579,581,580,576,567,555,540,521,501,479,459,441,422,404,384,366,349, 330,310,291,272,254,238,222,206,188,172,157,141,128,113,102,92,82,72,63,55,48,42,36,32,29,27,29,32, 39,48,59,67,74,81,87,91,97) path1y = new Array(285,271,255,242,230,225,225,233,242,253,265,275,281,284,280,269,256,239,224,208,194,181,168,154, 143,135,129,126,124,125,127,130,135,140,149,161,174,192,208,229,250,269,281,286,284,277,269,259,248, 237,222,202,183,164,147,133,120,108,99,92,86,81,78,76,77,82,90,100,116,136,157,177,200,225,249,270, 289,306,323,341,354,365,371,376,376,374,368,361,351,340,324,309,295,281,269,257,245,231,218,202,185, 170,159,153,148,142,133,120,106,92,80,69,59,50,44,40,37,35,34,34,34,36,37,39,42,46,50,54,60,67,76,84, 95,105,116,128,140,153,166,176,187,200,212,224,237,250,264,279,295,310,326,341,351,357,355,350,342, 331,320,310,299)
Ahora si queremos conocer el décimo valor x y el décimo valor y, puedes chequear el valor de path1x[9] y path1y[9]. El número del índice es siempre 1 menos del punto que estamos chequeando porque los arrays comienzan en cero. Entonces path1x[9]=156 y path1y[9]=253.
Con esta información en tu mente, podrás aplicar estos coordinadores al Objeto Camino el cual te permitira de voltear tus coordinadores en un camino de animación
Iniciación:
El objeto Camino es un objeto de agregar encima "addon" para el DynLayer. Este trabaja similarmente de la forma que mi Objetos Geométricos funciona. Es probablemente mejor de incluir el código para cada DynLayer y el Objeto Camino como ficheros js:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="path.js"></SCRIPT>
Una vez que hayas creado un DynLayer, tienes que crear el Objeto Camino encima de este. Tienes que pasar el Objeto Camino el nombre del DynLayer, y el nombre del Objeto Camino a lo largo con la información del camino. Esto es necesario para que el Objeto Camino pueda manipular al DynLayer.
objectName.pathName = new Path(dynlayer,name,arrayX,arrayY)
Ejemplo:
mylayer = new DynLayer("mylayerDiv")
mylayer.path1 = new Path(mylayer,'path1',
new Array(0,10,20,30),
new Array(0,10,20,30))
Opcionalmente tu puedes definir en avance los arrays y solo mandar sus nombres por los valores de arrayX y arrayY. Una vez que el Objeto Camino es iniciado, los parámetros se volverán propiedades de DynLayer/Path Objeto (Objeto Camino) y podrán ser cambiados en cualquier momento que sea necesitado (ie. mylayer.path1.arrayX = new Array(5,10,15,20)).
El método play():
Comienza la animación.
objectName.pathName.play(loop,speed,fn)
Todos los parámetros del método play() son opcionales, si no los especificas esta hará un default a play (false, 30,null) "falso, 30, nulo".
Ejemplo:
mylayer.path1.play(true,50)
Los métodos pausar() "pause()" y parar() "stop()":
Se explica a si mismo:
objectName.pathName.pause() or objectName.pathName.stop()Example:
Ver path1.html [ fuente ] para un ejemplo camino de animación.
| Casa | Próxima Lección: Utilizando DuoPath |