Transformations in JavaFX provide the means to incorporate animations in an internal timeline. They can create multiple animations that are executed in parallel or sequentially. Each node in the JavaFX scene graph can be transformed in the x-y coordinate using the following javafx.scene.transform classes: Translation, rotating, scaling, and shearing. Note, they can be applied to a single node or group of nodes.
- [Voiceover] Animations are a great way to draw attention to objects in your scene. JavaFX makes animating objects easy using transformations. The JavaFX.scene.transform API has many different ways we can transform objects. Transformations in JavaFX provide the means to incorporate animations in an internal timeline. We can initiate the transformation using event handlers. We can create multiple animations that are executed in parallel or sequentially.
What's really nice is that each node in the JavaFX scene graph can be transformed. Some of the transformations included in the library are Translate: translate allows us to move a node from one place to another along the XY or X,Y, and Z planes relative to its initial position. We can Scale to resize a node to appear either larger or smaller depending on the scaling factor. The Shear transformation rotates the object on one axis so that the X-axis and Y-axis are no longer perpendicular.
The coordinates of the node are shifted by the specified multipliers. And we can rotate a node about a specified pivot point of the scene. Now let's switch over to NetBeans and try this. I'm gonna create a new project, and I'm gonna call it "rotateButton". I'm gonna scroll down a little bit and I'm gonna remove the template code from line 24 to line 35. And now I'm gonna add my code.
I'm gonna create a button that will rotate when you click on it. So I'll start by creating a new transform object called "rotate", I'll create a new button with some text that says "click to Rotate". And I need to add the transforms to my button. Okay, before we go on, let's go ahead and import the library that we need. Now, let's set an event handler so when they click on the button, it rotates. I want to define a rotate angle, so I actually need to define the variable outside of my public void start method.
So I'm gonna go up here to line 22, and I'm gonna add "double angle=0.0;" That way the variable is available to me inside my setOnAction method. I'll change the angle to rotate by 15 degrees every time we push the button. And now, I'll rotate the object. Remember, I have to set a pivot point for the X and Y values. Now I'm gonna set the pivot point to be the center of my button.
That's it for the rotate, now I need to create a FlowPane. I wanna align it so that my image is in the middle. I'm gonna add some padding. And now, I just need to add my button to my root. Alright, let's go ahead and import our libraries that we need. It looks like I forgot my period between "getChildren()" and "add". There we go. The last thing I wanna do is change my title. And we'll add a stage title that says "Animate the button!" Alright! Let's run this and try it out.
Okay, here's my window with my button in the middle, and if I click on it, it should rotate 15 degrees each time. Notice the pivot point. The button is rotating around the center of the button. I can keep clicking on it, and eventually it'll go back around to the way it started. As you can see, animation is pretty easy with JavaFX. Make sure you check out the JavaFX.scene.transform to see other transformations that you could apply.
- What is JavaFX?
- Creating a simple JavaFX program
- Drawing lines, shapes, and text
- Applying effects
- Adding and animating images and charts
- Customizing interfaces with CSS