24 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, 2017

Transcription

1 24 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, Animation JavaFX provides support for animation. In scientific applications, animation should be used to help the user understand the displayed data and not as special effects. We will discuss: Transitions Key frames and time lines Interpolators JavaFX provides a number of transitions to translate, rotate, change fill, fade etc nodes in your scene graph. 6.1 Transitions Transitions extend the class Transition. Here are some of the main ones: Transition Animated property FadeTransition transparency FillTransition Fill color (of shape) PathTransition move along a path RotateTransition rotate ScaleTransition scale StrokeTransition stroke color (of shape) TranslateTransition translate PauseTransition no visible effect Transitions are easy to use. For example, let s look at how to rotate a rectangle all the way around in one second: Here is the code: R o t a t e T r a n s i t i o n t r a n s i t i o n=new R o t atetransition ( ) ; t r a n s i t i o n. setnode ( r e c t a n g l e ) ; t r a n s i t i o n. setduration ( Duration. seconds ( 1 ) ) ; t r a n s i t i o n. setfromangle ( 0 ) ; t r a n s i t i o n. settoangle ( ) ; t r a n s i t i o n. play ( ) ; Use play() stop start() pause() to control an animation. Also: playfrom(), playfromstart(), jumpto(). The rate property can be used to set the animation rate.

2 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, Definition of a start (or from ) value is optional. If not set, the current value is used as start value. The end (or to ) value can be set either absolute or relative. In the above example, we could have used setbyangle(360) instead of using setfromangle(0) and settoangle(360). To play a transition multiple times, use the property cyclecount. Set to the special value Animation.INDEFINITE to play continuously. To play the transition backward after playing it forward, set the property autoreverse. Each direction played counts as one cycle, e.g.: If you set: setcyclecount(3); setautoreverse(true); then this is what will play: done forward reverse forward You can use setonfinished() to set a handler that is called once the animation has finished. A PathTransition moves a node along a Path. For example, it can be used to move a rectangle around a circle: Rectangle r e c t a n g l e=new Rectangle ( 5 0, 2 0 ) ; C i r c l e c i r c l e=new C i r c l e ( 2 2 0, 2 2 0, ) ; PathTransition t r a n s i t i o n=new PathTransition ( ) ; t r a n s i t i o n. setduration ( Duration. seconds ( 3 ) ) ; t r a n s i t i o n. setnode ( r e c t a n g l e ) ; t r a n s i t i o n. setpath ( c i r c l e ) ; t r a n s i t i o n. s e t O r i e n t a t i o n ( PathTransition. OrientationType.ORTHOGONAL TO TANGENT) ; t r a n s i t i o n. play ( ) ; Note the property orientation: by default, the orientation of the animated node is as is, but here we set it so that the node is always oriented in the current direction of the path. 6.2 Parallel and sequential transitions Assume that we want to animate a ball bouncing between two walls 1. Whenever the ball hits a wall, it compresses slightly: What transitions are involved? A TranslateTransition is used to move the ball back and forth. As the ball gets close to a wall, a ScaleTransition is used to flatten it. As the ball leaves a wall, a ScaleTransotion is used to restore its shape. Translation and scaling have to happen in parallel. The two scaling transitions happen sequentially, and there is a pause between them. 1 Anton Epple, JavaFX 8, Grundlagen und fortgeschrittene Techniken, dpunkt.verlag 2015

3 26 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, 2017 This is the animation layout: translate 2 seconds 0.3s 1.4s 0.3s scale pause scale down up }{{} sequential The individual transitions: parallel T r a n s l a t e T r a n s i t i o n t r a n s l a t e = new T r a n s l a t e T r a n s i t i o n ( ) ; t r a n s l a t e. setduration ( Duration. seconds ( 2 ) ) ; t r a n s l a t e. setbyx ( ) ; S c a l e T r a n s i t i o n scaledown = new S c a l e T r a n s i t i o n ( ) ; scaledown. setduration ( Duration. m i l l i s ( ) ) ; scaledown. setfromx ( 0. 7 ) ; scaledown. settox ( 1 ) ; scaledown. setfromy ( 1. 3 ) ; scaledown. settoy ( 1 ) ; S c a l e T r a n s i t i o n scaleup = new S c a l e T r a n s i t i o n ( ) ; scaleup. setduration ( Duration. m i l l i s ( ) ) ; scaleup. setfromx ( 1 ) ; scaleup. settox ( 0. 7 ) ; scaleup. setfromy ( 1 ) ; scaleup. settoy ( 1. 3 ) ; PauseTransition pause = new PauseTransition ( ) ; pause. setduration ( Duration. m i l l i s ( ) ) ; pause. setcyclecount ( 2 ) ; Setting up the sequential and parallel transitions: S e q u e n t i a l T r a n s i t i o n s e q u e n t i a l = new S e q u e n t i a l T r a n s i t i o n ( scaledown, pause, scaleup ) ; P a r a l l e l T r a n s i t i o n p a r a l l e l = new P a r a l l e l T r a n s i t i o n ( c i r c l e, t r a n s l a t e, s e q u e n t i a l ) ; p a r a l l e l. setcyclecount ( Animation. INDEFINITE ) ; p a r a l l e l. setautoreverse ( true ) ; p a r a l l e l. s e t I n t e r p o l a t o r ( I n t e r p o l a t o r.ease BOTH) ; p a r a l l e l. play ( ) ; Note that here we explicitly set the interpolator. 6.3 Interpolators An Interpolator determines the speed profile of an animation. JavaFX provides the following: Interpolator.LINEAR - constant speed Interpolator.EASE IN - start slowly and then pickup speed Interpolator.EASE OUT - slow down toward the end Interpolator.EASE BOTH - start slowy and end slowly

4 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, Interpolator.DISCRETE - jump from start value to end value at end of animation You can define your own transitions and your own interpolators. 6.4 Timeline and key frames Transitions have limited scope. For example, if you wanted to animate a smooth transition from the left-hand configuration to the right-hand one, then that would not be easy using transitions: Of course we could use TranslateTransition objects to translate circles to new positions, but how to animate the lines? (Actually, could be done using bindings...) JavaFX provides a general mechanism for animation based on JavaFX properties. Say that we want to animate a line: The properties that we want to animate are: startx, starty, endx and endy. Properties are animated using three classes: KeyFrame, KeyValue and Timeline Key frames are laid out along a time line. At each key frame, we define a set of key values. At the given key frame, the key values specify the values of the animated properties at that frame. Between key frames, the values of the animated properties are interpolated. In this simple animation of a line, there are only two key frames and each has four key values: startx starty keyvalye endx endy startx starty keyvalye endx endy KeyFrame Dura/on KeyFrame TimeLine This is the corresponding code: Line l i n e = new Line ( ) ;... KeyFrame keyframe1 = new KeyFrame ( Duration. m i l l i s ( 0 ), new KeyValue ( l i n e. startxproperty ( ), 5 0), new KeyValue ( l i n e. startyproperty ( ), 160), new KeyValue ( l i n e. endxproperty ( ), 150), new KeyValue ( l i n e. endyproperty ( ), 1 0 ) ) ;

5 28 Advanced Java for Bioinformatics, WS 17/18, D. Huson, November 9, 2017 KeyFrame keyframe2 = new KeyFrame ( Duration. m i l l i s ( ), new KeyValue ( l i n e. startxproperty ( ), 400), new KeyValue ( l i n e. startyproperty ( ), 4 0), new KeyValue ( l i n e. endxproperty ( ), 100), new KeyValue ( l i n e. endyproperty ( ), ) ) ; Timeline t i m e l i n e = new Timeline ( keyframe1, keyframe2 ) ; t i m e l i n e. play ( ) ; If you don t specify the initial key frame at time 0, then the current values of the animated properties are used. Types properties that can be interpolated are numerical types (integers, floats and doubles), boolean and Color. You can animate your own property T using the Interpolatable interface, by providing: public T interpolate (T endvalue,double t) Here the double value of t is between 0 (return original value of object) and 1 (return the end value). For values between 0 and 1, return an interpolated value.