Views
9 months ago

tornadofx-guide

9. Shapes and Animation

9. Shapes and Animation path { moveTo(0.0, 0.0) hlineTo(70.0) quadqurveTo { x = 120.0 y = 60.0 controlX = 100.0 controlY = 0.0 } lineTo(175.0, 55.0) arcTo { x = 50.0 y = 50.0 radiusX = 50.0 radiusY = 50.0 } } Animation JavaFX has tools to animate any Node by gradually changing one or more of its properties. There are three components you work with to create animations in JavaFX. Timeline - A sequence of KeyFrame items executed in a specified order KeyFrame - A "snapshot" specifying value changes on one or more writable properties (via a KeyValue ) on one or more Nodes KeyValue - A pairing of a Node property to a value that will be "transitioned" to 140

9. Shapes and Animation A KeyValue is the basic building block of JavaFX animation. It specifies a property and the "new value" it will gradually be transitioned to. So if you have a Rectangle with a rotateProperty() of 0.0 , and you specify a KeyValue that changes it to 90.0 degrees, it will incrementally move from 0.0 to 90.0 degrees. Put that KeyValue inside a KeyFrame which will specify how long the animation between those two values will last. In this case let's make it 5 seconds. Then finally put that KeyFrame in a Timeline . If you run the code below, you will see a rectange gradually rotate from `0.0` to `90.0` degrees in 5 seconds (Figure 9.1). val rectangle = rectangle(width = 60.0,height = 40.0) { padding = Insets(20.0) } timeline { keyframe(Duration.seconds(5.0)) { keyvalue(rectangle.rotateProperty(),90.0) } } Figure 9.1 In a given KeyFrame , you can simultaneously manipulate other properties in that 5-second window too. For instance we can transition the arcWidthProperty() and arcHeightProperty() while the Rectangle is rotating (Figure 9.2) timeline { keyframe(Duration.seconds(5.0)) { keyvalue(rectangle.rotateProperty(),90.0) keyvalue(rectangle.arcWidthProperty(),60.0) keyvalue(rectangle.arcHeightProperty(),60.0) } } Figure 9.2 141

GUIDE
Guide
GUIDE
GUIDE
GUIDE
Guide
Guide
GUIDE
Guide
Guide
GUIDE
Guide