Transition in JavaFX Part 12 (Fold)

早いもので前回の Grow から ５日。
Mac の調子が悪くなり、再インストールするハメに...　 やっと インターネット と JavaFX ができる程度までには復活することができました。 元通りに設定するには、まだまだ時間がかかりそうなので、とりあえず、ずっと気になっていた このシリーズを再開することに...　 と言いつつ、もはや 元通りに設定する方法が 思い出せない...　 まぁ HDD をちょっといいのに交換して、以前より快適になったし、もう元に戻らなくてもいいかな...
と言うことで、本題です。

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

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

の 11 個です。

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

var scaleX = 1.0;
var scaleY = 1.0;

node.clip = Rectangle {
    width:  node.boundsInLocal.width
    height: node.boundsInLocal.height
    transforms: Scale {
        pivotX: 0
        pivotY: 0
        x: bind scaleX
        y: bind scaleY
    }
}

SequentialTransition {
    content: [
        Timeline { keyFrames: KeyFrame { time: 1.0s values: scaleY => 0.05 tween Interpolator.EASEOUT } }
        Timeline { keyFrames: KeyFrame { time: 1.0s values: scaleX => 0.0  tween Interpolator.EASEIN } }
    ]
}.playFromStart();

今回のポイントは...
縦と横の２つのスケール変更を順番に実行するために SequentialTransition を使っているところと Interpolator を指定して 縦から横に移る際の動きを少し遅くしているところでしょうか。また、BlindDown 同様 センター基準ではなく、 pivot を指定してスケールを変更しなくてはならないので ScaleTransition ではなく、 Timeline を使っています。やはり、ScaleTransition には pivot が欲しい！！

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