FX

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 dim a node in response to a mouse click.
  
  
  

  import javafx.scene.paint.Color;
  import javafx.scene.Scene;
  import javafx.stage.Stage;
  import javafx.animation.transition.FadeTransition;
  import javafx.scene.input.MouseEvent;
  import javafx.scene.paint.RadialGradient;
  import javafx.scene.paint.Stop;
  import javafx.scene.shape.Circle;
  
  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
                }
          ]
      }
      onMouseClicked: function( zoom: MouseEvent ):Void {
         if (circ.hover) {
              fadeTransition.play();
         }
      }
  };
  def fadeTransition = FadeTransition {
      duration: 3s node: circ
      fromValue: 1.0 toValue: 0.3
  }
      
  Stage {
      title: "fadeTransition"
      scene: Scene {
      width: 200
      height: 200
          content: circ
       }
   } 
   

• 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: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.