Transition in JavaFX Part 9 (Highlight)

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

• Appear
• Fade
• BlindDown
• BlindUp
• SwitchOff
• Puff
• SlideDown
• SlideUp

の８つです。今回からやっと後半戦突入です！！

後半戦 最初 の 今回は Effect.Highlight です。 （後半戦は後ろから順番に紹介していこうと思います。）
JavaFX で実装するなら、こんな感じかな...

var opacity = 0.3;
node.effect = Blend {
     opacity: bind opacity
     topInput: Flood {
         x: node.boundsInLocal.minX
         y: node.boundsInLocal.minY
         width:  node.boundsInLocal.width
         height: node.boundsInLocal.height
         paint: Color.YELLOW
     }
};

Timeline {
    keyFrames: KeyFrame {
        time: 1.0s values: opacity => 0.0 tween Interpolator.EASEIN
    }
}.playFromStart();

今回のポイントは...
黄色の Rectangle を新たに追加したり、背景の Rectangle の色を黄色に変更するのではなく、effect 効果を使って Highlight を実現しているところです。
どんな Node にも effect 属性はあります。つまり、どんな Node でも Highlight できてしまうという訳です。
例えば、背景色を設定できない Text であってもです。もちろん イメージ や、更には レイアウト であっても...
一覧表等で よくある マウスオーバー した行の Highlight なんかにも使えそうですね...

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