Transition in JavaFX Part 15 (Shake)

JavaFX Transition

『Transition in JavaFX』シリーズは script.aculo.us の 16個の Effect の デモ をそっくりそのまま JavaFX で実装してしまおうという企画です。
前回までに紹介した Effect は

の 14 個です。残すところ Shake と DropOut の2つとなりました。

15回目の今回は Effect.Shake です。 JavaFX で実装するなら、こんな感じかな... 

SequentialTransition {
    node: node
    content: [
        TranslateTransition { duration:  50ms fromX:   0 toX: -20 }
        TranslateTransition { duration: 100ms fromX: -20 toX:  20 repeatCount:4 autoReverse: true }
        TranslateTransition { duration:  50ms fromX: -20 toX:   0 }
    ]
}.playFromStart();
1つの TranslateTransition では、Effect.Shake と同じ動きが実現できないので
  1. 基準 -> 左端
  2. 左端 <-> 右端 （4回 反復）
  3. 左端 -> 基準
のようにノードを移動させる 3つの TranslateTransition を SequentialTransition で順番に実行するようにしています。

『Effect Demo』 に、今回紹介した Effect.Shake を追加しました。
興味のある方は、以下のボタンをクリックして、実際にデモで確認してみましょう。