Transiciones en JavaFX

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