TornadoFX連續動畫？

閱讀完文檔後，我仍然對如何在之後執行動畫感到困惑。我有這樣的時間表：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) } }

這一次運行它們，但我想在另一個完成後運行每個動畫！我不能完全弄清楚如何做到這一點。（對不起，如果這是顯而易見的，我一般很新的科特林和Java！）

我看到關鍵幀具有onFinished屬性，但我可以不是很清楚我應該怎麼做設置它。有一個更好的方法嗎？謝謝！

來源

2017-07-21 shanling

有一個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) 
     } 
    } 

}

來源

2017-07-21 11:26:18

工作就像一個魅力，謝謝！我喜歡使用的格式。然後，非常可讀和容易理解的像我這樣的noob lol – shanling

基於由@ tornadofx扇我添加了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使用生成期的對象:)

來源

2017-07-21 14:06:05

真棒，激動1.7.9！：^） – shanling

在這種情況下，你只是設置規模和輪換，也有一些不錯的助手已經在庫中。這應該爲你工作：

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到處是必需的，因爲這些傭工可用於簡單的一次性自動播放動畫。

編輯

a discussion in 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()

來源

2017-07-21 17:10:11

TornadoFX連續動畫？

回答

相關問題