Launch JavaFX Media Browser Application Download NetBeans Project

Introduction

In this task, you use the JavaFX animation class to zoom In and zoom Out the selected image by adding a timeline, key frames, and interpolators. Keyframe animation controls changes in properties such as scale, position, or opacity over time by defining the values of the property at key times and interpolating the values in between.

• Timeline is an object that contains a list of key frames, together with a function to control the animation, which might be to start it, stop it, and repeat it.
  
  
• KeyFrame describes a set of end states of various properties (values) of objects at a certain time instant relative to the start of the animation, together with interpolation specifications to calculate the in-between values relative to the previous frame.
  
  
• KeyValue class defines a target, which is a reference to an object to animate, a value for the object to take on at the KeyFrame time, and an Interpolator.
  
  
• The type of interpolation is defined with a KeyValue so that different interpolation types can be used for each KeyValue in a KeyFrame and at different KeyFrame times. Custom interpolators can be written, but the following simple interpolators are provided for animating numeric values:
  
  
  • Interpolator.LINEAR - (The default) uses simple linear interpolation.
  • Interpolator.EASEOUT - Start changing the value slowly after the KeyFrame.
  • Interpolator.EASIN - Slow the rate of change as the KeyFrame is reached.
  • Interpolator.EASEBOTH - Smooth the rate of change through the KeyFrame.
  A shorthand syntax is provided for defining simple KeyFrames.
  
  

  at (<time>) {
      <target> => <value> tween <interpolator>;
  }
  

Running the Project

1. Download the Module 2 Task 1 NetBeans project and open it in the NetBeans IDE.
   
   
2. Run the project.
   
   
3. Click a photo, and watch it slowly zoom.
   
   
4. Click another image and observe how the first image scales back to a thumbnail as the new image scales up to 100%.

The zoom effect is created by scaling the size of the image on the x and y axes over time. In earlier tasks, the size of the thumbnail enlarged on mouse-over by changing the scaleX and scaleY factors, which are needed to change the size of the ImageView. In this task, you apply a different scale factor throughout the 8/10ths of a second it takes to complete the zoom effect. This effect is applied for zooming a thumbnail image and for transitioning between images. Figure 1 shows the architecture for this task.

Figure 1

Exploring the Animation

The following code sample from Main.fx shows the zoomInTimeline animation class with timeline, key frame, and interpolator objects.

        def zoomInTimeline = Timeline {
            keyFrames: [
                at (0s) {
                    media.scaleX => minPhotoScale tween Interpolator.EASEOUT;
                    media.scaleY => minPhotoScale tween Interpolator.EASEOUT;
                },
                at (0.8s) {
                    media.scaleX => 1 tween Interpolator.EASEIN;
                    media.scaleY => 1 tween Interpolator.EASEIN;
                }
            ]
        };

Timeline

A Timeline (javafx.animation.Timeline) lets you establish a sequence of key frames using javafx.animation.KeyFrame. In the code sample, the timeline is defined as zoomInTimeline. If you scroll farther down in the source code, you see a zoomOutTimeline, which is the animation for transitioning from one image to another.

The time instance variable defines the elapsed time at which the associated values will be set within a single cycle of the Timeline object. The time is a variable of the javafx.lang.Duration class that takes a Number value followed by "s" or "ms" to indicate seconds or milliseconds. The => operator provides a literal constructor for a list of key values. The tween operator is a literal constructor for an interpolated value.

The timeline is available as a code snippet in the NetBeans Palette > Animation section. When you add a timeline to your code, it includes a key frame object by default. You activate the timeline by adding a function such as play.

Key Frame

A key frame is contained within a timeline, and it defines an endpoint in a transition of an animation; effectively, what you want to see at the end of the transition and at what time the transition should end.

Key frames contain a sequence of key values, which are the values the target variable uses. In the code sample, keyFrames are set at 0, and .8 seconds. The key values photo.scaleX and photo.scaleY are created by the => operator.

In this task, the photo zoom is controlled by EASEOUT for the 7.5% larger size and EASEIN for the full size of the image. EASEIN uses a default value for deceleration only.

The the two transitions of the animation are:

1. The beginning effect where the image starts out at a slightly smaller size
   
   

   at (0s) {
       media.scaleX => minPhotoScale tween Interpolator.EASEOUT;
       media.scaleY => minPhotoScale tween Interpolator.EASEOUT;
   

   
   
2. The ending effect where the image comes to rest at the desired final size.
   
   

   at (0.8s) {
       // End up just right
       photo.scaleX => 1.0 tween Interpolator.EASEIN;
       photo.scaleY => 1.0 tween Interpolator.EASEIN;
   

Try It

Try modifying the timeline and interpolators in this task. For example, instead of using EASEIN, change the interpolator to LINEAR. Clean and build the project, and then run it. Click an image and observe the zooming behavior. The difference is subtle, but you see that the zooming occurs at a fixed rate and does not move as smoothly as it does with EASEIN.