Consecutive animation in TornadoFX?

Question

After reading through the documentation, I'm still a bit confused on how to execute an animation after another one has completed. I have a timeline like so:

timeline {
  keyframe(Duration.seconds(0.5)) {
    keyvalue(firstImg.scaleXProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(firstImg.scaleYProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(firstImg.rotateProperty(), 0.0, interpolator = Interpolator.EASE_BOTH)
  }

  keyframe(Duration.seconds(0.5)) {
    keyvalue(secondImg.scaleXProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(secondImg.scaleYProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(secondImg.rotateProperty(), 0.0, interpolator = Interpolator.EASE_BOTH)
  }

  keyframe(Duration.seconds(0.5)) {
    keyvalue(thirdImg.scaleXProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(thirdImg.scaleYProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(thirdImg.rotateProperty(), 0.0, interpolator = Interpolator.EASE_BOTH)
  }

  keyframe(Duration.seconds(0.5)) {
    keyvalue(fourthImg.scaleXProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(fourthImg.scaleYProperty(), 1.0, interpolator = Interpolator.EASE_BOTH)
    keyvalue(fourthImg.rotateProperty(), 0.0, interpolator = Interpolator.EASE_BOTH)
  }
}

This runs them all at once, but I would like to run each animation after the other one has finished! I can't quite figure out how to do this.. (sorry if this is obvious, I am very new to Kotlin and Java in general!)

I see that the keyframe has an onFinished property but I can't quite figure out what I'm supposed to actually set it to. Is there a better way to do this? Thank you!

Answer 1

Based on the structure proposed by @tornadofx-fan I've added builders for sequentialTransition and parallelTransition, so starting from TornadoFX 1.7.9 you can do the same like this:

class TransitionViews: View() {
   val r1 = Rectangle(20.0, 20.0, Color.RED)
   val r2 = Rectangle(20.0, 20.0, Color.YELLOW)
   val r3 = Rectangle(20.0, 20.0, Color.GREEN)
   val r4 = Rectangle(20.0, 20.0, Color.BLUE)

   override val root = vbox {
       button("Animate").action {
           sequentialTransition {
               timeline {
                   keyframe(0.5.seconds) {
                       keyvalue(r1.translateXProperty(), 50.0, interpolator = Interpolator.EASE_BOTH)
                   }
               }
               timeline {
                   keyframe(0.5.seconds) {
                       keyvalue(r2.translateXProperty(), 100.0, interpolator = Interpolator.EASE_BOTH)
                   }
               }
               timeline {
                   keyframe(0.5.seconds) {
                       keyvalue(r3.translateXProperty(), 150.0, interpolator = Interpolator.EASE_BOTH)
                   }
               }
               timeline {
                   keyframe(0.5.seconds) {
                       keyvalue(r4.translateXProperty(), 200.0, interpolator = Interpolator.EASE_BOTH)
                   }
               }
           }
       }
       pane {
           add(r1)
           add(r2)
           add(r3)
           add(r4)
       }
   }
}

The timeline builder inside of these transitions don't automatically play, while the transition itself automatically plays when the builder is completed. You can pass play=false to the transition builder to disable autoplay.

Also note the usage of 0.5.seconds to generate the Duration objects :)