How-To's > How do I apply fade-in and fade-out effects?

You can apply fade-in and fade-out effects in two ways:

• Use the FadeTransition class.
  The FadeTransition class contains fromValue and toValue variables, which vary the opacity of the node, in which 1.0 is completely opaque and 0.0 is completely transparent. This example uses fadeTransition to apply a cyclical fade-in and fade-out effect when the mouse cursor enters the circle, and to pause the effect when the mouse cursor exits the circle.
  
  
  

  import javafx.scene.paint.Color;
  import javafx.scene.Scene;
  import javafx.stage.Stage;
  import javafx.animation.transition.FadeTransition;
  import javafx.scene.paint.RadialGradient;
  import javafx.scene.paint.Stop;
  import javafx.scene.shape.Circle;
  import javafx.animation.Timeline;
  import javafx.scene.input.MouseEvent;
  
  var circ:Circle;
  circ = Circle {
      centerX: 100, centerY: 100
      radius: 40
      fill: RadialGradient {
          stops: [
              Stop {
                  color : Color.web("#80CAFA")
                  offset: 0.0
               }
               Stop {
                   color : Color.web("#1F6592")
                   offset: 1.0
                }
          ]
      }
      onMouseEntered: function( fade: MouseEvent ):Void {
              fadeTransition.play();
         }
      onMouseExited: function( fade: MouseEvent ):Void {
              fadeTransition.pause();
         }
  };
  def fadeTransition = FadeTransition {
      duration: 3s node: circ
      fromValue: 1.0 toValue: 0.3
      repeatCount: Timeline.INDEFINITE
      autoReverse: true
  }
  
  Stage {
      title: "fadeTransition"
      scene: Scene {
      width: 200
      height: 200
          content: circ
       }
   } 
   

• As an alternative, you can use the rate variable of the Timeline class to apply fade-in and fade-out effects. For an example, see the sample Dragging an MP3 Player Applet to the Desktop. The rate variable controls the fade-in and fade-out behavior when you move the mouse over buttons of the MP3 player.

API Documentation

• FadeTransition
• Timeline

Last Updated: April 2010
[Return to How-To's Home]

---