连续动画在TornadoFX？

在阅读完文档后，我仍然对如何在另一个完成后执行动画感到困惑。 我有这样的时间表：

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) } } 

这一次运行它们，但是我想在另一个完成后运行每个动画！ 我不能完全弄清楚如何做到这一点..（ 抱歉，如果这是显而易见的，我一般对Kotlin和Java来说是新的！ ）

我看到关键帧有一个onFinished属性，但我不能完全弄清楚我应该实际设置它。 有没有更好的方法来做到这一点？ 谢谢！

Answer 1

有一个JavaFX类“SequentialTransition”，它将按顺序运行你的时间线。 您需要使用传入时间轴构建器的标志禁用TornadoFX自动播放功能。 如果要使用类似的编码模式一次全部运行，请查看ParallelTransition。

 class STTest : View("My 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") { setOnAction { val t1 = timeline(false) { keyframe(Duration.seconds(0.5)) { keyvalue(r1.translateXProperty(), 50.0, interpolator = Interpolator.EASE_BOTH) } } val t2 = timeline(false) { keyframe(Duration.seconds(0.5)) { keyvalue(r2.translateXProperty(), 100.0, interpolator = Interpolator.EASE_BOTH) } } val t3 = timeline(false) { keyframe(Duration.seconds(0.5)) { keyvalue(r3.translateXProperty(), 150.0, interpolator = Interpolator.EASE_BOTH) } } val t4 = timeline(false) { keyframe(Duration.seconds(0.5)) { keyvalue(r4.translateXProperty(), 200.0, interpolator = Interpolator.EASE_BOTH) } } /* functions look better val st = SequentialTransition() st.children += t1 st.children += t2 st.children += t3 st.children += t4 st.play() */ t1.then(t2).then(t3).then(t4).play() } } pane { add(r1) add(r2) add(r3) add(r4) } } } 

Answer 2

根据@ tornadofx-fan提出的结构，我添加了sequentialTransition和parallelTransition的构建器，所以从TornadoFX 1.7.9开始，你可以这样做：

 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) } } } 

这些转换中的时间线构建器不会自动播放，而转换本身会在构建器完成时自动播放。 您可以将play=false传递给转换构建器以禁用自动播放。

另外请注意使用0.5.seconds生成持续时间对象:)

Answer 3

在这种情况下，你只是设置比例和旋转，图书馆已经有一些好帮手。 这应该为你工作：

 val time = 0.5.seconds firstImg.scale(time, Point2D(1.0, 1.0), play = false).and(firstImg.rotate(time, 0.0, play = false)) .then(secondImg.scale(time, Point2D(1.0, 1.0), play = false).and(secondImg.rotate(time, 0.0, play = false))) .then(thirdImg.scale(time, Point2D(1.0, 1.0), play = false).and(thirdImg.rotate(time, 0.0, play = false))) .then(fourthImg.scale(time, Point2D(1.0, 1.0), play = false).and(fourthImg.rotate(time, 0.0, play = false))) .play() 

因为这些助手是为简单的一次性自动播放动画而设计的，所以需要play = false 。

编辑

在Slack讨论之后，这些可能会在未来的版本中被简化，所以最终可能会如此简单

 val time = 0.5.seconds listOf( firstImg.scale(time, 1 p 1) and firstImg.rotate(time, 0), secondImg.scale(time, 1 p 1) and secondImg.rotate(time, 0), thirdImg.scale(time, 1 p 1) and thirdImg.rotate(time, 0), fourthImg.scale(time, 1 p 1) and fourthImg.rotate(time, 0) ).playSequential() 

观看发行说明获取更多信息！

另一个编辑

看起来我过了一些复杂的事情。 如果你喜欢它，你可以使用这个：

 val time = 0.5.seconds SequentialTransition( firstImg.scale(time, Point2D(1.0, 1.0), play = false).and(firstImg.rotate(time, 0.0, play = false)). secondImg.scale(time, Point2D(1.0, 1.0), play = false).and(secondImg.rotate(time, 0.0, play = false)), thirdImg.scale(time, Point2D(1.0, 1.0), play = false).and(thirdImg.rotate(time, 0.0, play = false)), fourthImg.scale(time, Point2D(1.0, 1.0), play = false).and(fourthImg.rotate(time, 0.0, play = false)) ).play()