0 calificaciones0% encontró este documento útil (0 votos)
106 vistas5 páginas
El documento describe las diferentes transiciones disponibles en JavaFX que permiten agregar efectos a objetos como desvanecimiento, rotación, escala, movimiento y pausa. Las transiciones incluyen Fade, Rotate, Scale, Translate, Pause y Path. Se pueden componer transiciones de forma secuencial u simultánea usando SequentialTransition y ParallelTransition. El código para agregar una transición es corto y permite crear efectos atractivos en aplicaciones.
El documento describe las diferentes transiciones disponibles en JavaFX que permiten agregar efectos a objetos como desvanecimiento, rotación, escala, movimiento y pausa. Las transiciones incluyen Fade, Rotate, Scale, Translate, Pause y Path. Se pueden componer transiciones de forma secuencial u simultánea usando SequentialTransition y ParallelTransition. El código para agregar una transición es corto y permite crear efectos atractivos en aplicaciones.
El documento describe las diferentes transiciones disponibles en JavaFX que permiten agregar efectos a objetos como desvanecimiento, rotación, escala, movimiento y pausa. Las transiciones incluyen Fade, Rotate, Scale, Translate, Pause y Path. Se pueden componer transiciones de forma secuencial u simultánea usando SequentialTransition y ParallelTransition. El código para agregar una transición es corto y permite crear efectos atractivos en aplicaciones.
JavaFX nos brinda la posibilidad de agregar efectos a nuestros
objetos, controles, nodos, imgenes, figuras, formas, entre otros, de una manera ms sencilla. Esto es posible gracias a las animaciones de la clase Transitions, contenida en el paquete javafx.animation.transition.Transition de JavaFX. Esta clase nos ofrece un framework para incorporar diversas transiciones; que a la vez nos permitir componer los efectos de stas de forma paralela o secuencial. En esta clase, encontramos diferentes tipos de transiciones como Fade (desvanecer gradualmente), Rotate (rotar),Translate (trasladar) , Scale (agrandar), Pause, Parallel, Sequential y Path. Cualquiera de estos tipos lo puedes agregar, arrastrndolo desde tu paleta de opciones JavaFX.
Fade Transition Esta transicin crea un efecto de desvanecimiento del objeto. Para ello, cuenta con atributos principales comoduration, que especifica el tiempo en que se extender la transicin; fromValue & toValue, los cuales indican el comienzo y final de opacidad de la imagen, respectivamente; autoreverse, valor booleano que especifica si la transicin invierte su direccin en cada ciclo alterno; repeatCount, nmero que indica la cantidad de repeticiones de la transicin; y node, el cual especifica el nodo destino de la transicin. A continuacin, te mostramos el cdigo necesario para agregar este efecto. ? 1 2 3 4 5 6 FadeTransition { duration: 2s node: nodo fromValue: 1.0 toValue: 0.1 repeatCount:4 autoReverse: true }.play(); Como observamos, invocamos a la funcin play() para que la transicin se pueda ejecutar. Tambin, se puede llamar a otras funciones como playFromStart(), paused(), entre otras. Adems, en el atributo node, se le asocia una variable nodo, la cual puede ser una figura como por ejemplo: ? 1 2 3 4 5 6 var nodo = Rectangle { x: 100 y: 100 height: 100 width: 100 arcHeight: 20 arcWidth: 20 fill: Color.BLUEVIOLET } Scale Transition sta permite crear un efecto de escala. Entre sus atributos necesarios se encuentran byX & byY, los cuales especifican hasta el valor incrementado en X e Y, respectivamente. O, tambin, se pueden setear valores en los atributos (fromX, fromY) & (toX, toY). El cdigo necesario para agregar esta transicin es el siguiente: ? 1 2 3 4 5 6 ScaleTransition { duration: 2s node: nodo byX: 1.5 byY: 1.5 repeatCount:4 autoReverse: true }.play(); Rotate Transition Permite crear un efecto de rotacin del objeto. Cuenta con el atributo byAngle, en el cual se puede especificar el nmero de grados a rotar del nodo destino. Ac te mostramos un ejemplo: ? 1 2 3 4 5 6 RotateTransition { duration: 2s node: nodo byAngle: 360 repeatCount:4 autoReverse: true }.play(); Translate Transition Permite crear un efecto de movimiento o desplazamiento del nodo a lo largo de los ejes X y/o Y. Dispone de los atributos byX & byY, que indican cunto ms se va a incrementar de la posicin actual en los ejes X e Y. Asimismo, se puede especificar desde dnde comienza la posicin y termina, con atributos como fromX, fromY & toX, toY. No es necesario setear valores para ambos ejes. Se puede trabajar con el eje X o Y, segn se desee. En el siguiente cdigo, se muestra un ejemplo de esta transicin: ? 1 2 3 4 5 6 TranslateTransition { duration: 2s node: nodo repeatCount:4 autoReverse: true byY: 100 byX: 100 }.play(); Pause Transition sta permite crear una accin de espera para las dems transiciones. May0rmente, se suele usar para componer transiciones secuenciales. El nico atributo importante es el de duration, con el cual se puede dar un tiempo de espera antes de ejecutar alguna accin u otra transicin. Ac, te mostramos un ejemplo: ? 1 2 3 4 PauseTransition { duration: 2s node: nodo } Path Transition Permite crear que el objeto pueda desplazarse a travs de una ruta y orientacin. Cuenta con atributos comoorientation, que indica la orientacin vertical del nodo; path, que especifica la trayectoria del recorrido del nodo. Un ejemplo de ste es el siguiente cdigo: ? 1 2 3 4 5 6 7 PathTransition { duration: 7s node: nodo path: AnimationPath.createFromPath( Path { elements: [ MoveTo { x: 250 y: 250 }, CubicCurveTo { x: 340 y: 200} ] }) orientation: OrientationType.ORTHOGONAL_TO_TANGENT repeatCount:4 autoReverse: true }.play(); Sequential Transition Permite componer una secuencia de transiciones. Slo se tiene que setear la variable node una vez y en content se agregar cada transicin que deseas que se ejecute, una despus de otra. A continuacin, te mostramos un ejemplo de esta transicin: ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 SequentialTransition { node: nodo content: [ PauseTransition { duration: 2s} RotateTransition { duration: 2s node: nodo byAngle: 360 repeatCount:4 autoReverse: true } FadeTransition { duration: 2s node: node fromValue: 1.0 toValue: 0.1 repeatCount:4 autoReverse: true } ] }.play(); Parallel Transition Permite crear un efecto, en donde se combina una serie de transiciones, pues stas se ejecutan a la simultneamente. Ejemplo: ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ParallelTransition { node: node content: [ RotateTransition { duration: 2s node: nodo byAngle: 360 repeatCount:4 autoReverse: true } FadeTransition { duration: 2s node: node fromValue: 1.0 toValue: 0.1 repeatCount:4 autoReverse: true } ] }.play(); Como se observa, el cdigo para agregar cualquier transicin es corto. De esa manera, podemos crear efectos ms atractivos, combinarlos, en nuestra aplicacin . ARTICULO ORIGINAL: http://www.kamlov.site90.net/?p=834