Transition in JavaFX Part 7 (SlideDown)

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

• Appear
• Fade
• BlindDown
• BlindUp
• SwitchOff
• Puff

の６つです。

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

node.clip = Rectangle {
    x: node.boundsInLocal.minX 
    y: bind -node.translateY
    width:  node.boundsInLocal.width
    height: node.boundsInLocal.height
}

TranslateTransition {
    node: node duration: 1.0s fromY: -node.boundsInLocal.height toY: 0.0
}.playFromStart();

TranslateTransition でノードを下方向に移動するのと同時に、 ノードが移動した分だけクリップを上方向（反対方向）に移動するようにしているところがポイント。
クリップは通常ノードと共に下方向に移動してしまいますが、反対方向に移動することによりクリップが移動していないように見えるのです。

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