Transition in JavaFX Part 13 (Squish)

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

• Appear
• Fade
• BlindDown
• BlindUp
• SwitchOff
• Puff
• SlideDown
• SlideUp
• Highlight
• Shrink
• Grow
• Fold

の 12 個です。

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

var scale = 1.0;
node.transforms = Scale {
    pivotX: 0
    pivotY: 0
    x: bind scale
    y: bind scale
}

Timeline {
    keyFrames: KeyFrame { time: 0.5s values: scale => 0.0 }
}.playFromStart(); 

前回の Fold や BlindDown と同様に、 pivot を指定してスケールを変更するため、 ScaleTransition ではなく、 Timeline を使っています。ScaleTransition に pivotX/pivotY 属性があればもっと簡単に （多分、上記のコードは一行で） 書けるんだろうな...

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