How-To's > How do I nest timelines and transitions?

Version: JavaFX 1.3

Create a master timeline to coordinate multiple timelines or transitions. Use ParallelTransition to start all of the timelines or transitions at the same time. Use SequentialTransition to play the timelines in sequential order.

Example Code

The following basic code creates a master timeline:

def somenode = Rectangle { ... }; //any type of node works here
def t1 = Timeline { ... };  //or define a transition here
def t2  Timeline { ... };
def t3 Timeline { ... };
def mastertimeline = ParallelTransition {  //Sequential Transition has the same node-content structure
    node: somenode  //leave this variable unspecified to inherit from individual timelines or transitions
    content: [t1, t2, t3]
}

The following full example of a master timeline runs a rotate and translate transition in parallel:

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.animation.transition.RotateTransition;
import javafx.animation.transition.TranslateTransition;
import javafx.animation.transition.SequentialTransition;
import javafx.animation.transition.ParallelTransition;

def node = Rectangle {
    translateX:50
    translateY:50
    width: 50
    height: 50
    fill:
        RadialGradient {
            stops: [
                Stop {
                    color : Color.web("#80CAFA")
                    offset: 0.0
                 }
                 Stop {
                     color : Color.web("#1F6592")
                     offset: 1.0
                  }
            ]
        }
};

def t1 = RotateTransition {
    duration: 5s
    node: node
    byAngle: 180 repeatCount:2 autoReverse: true
}

def t2 = TranslateTransition {
    duration: 5s
    node: node
    byX: 100 repeatCount:2 autoReverse: true
}

/* The following line can use either ParallelTransition
   or Sequential Transtion */
def master = ParallelTransition {
/* Leave the following variable unspecified to inherit
   from individual timelines or transitions */
    node: node
    content: [t1, t2]
}
master.play();


Stage {
    title: "RotateTransition"
    scene: Scene {
    width: 240
    height: 200
        content: node
    }
}

Tips

• By default, two or more timelines or transitions in the code will run in parallel, even without setting up a master timeline.
• In the previous code example, you can replace ParallelTransition with SequentialTransition, and the code will run. Instead of a square that is rotating and moving at the same time, rotation occurs first and then a movement to the right.
• If the node variable is not specified in your ParallelTransition or SequentialTransition instance, it will be inherited from the individual timelines or transitions. You can animate or apply a transition to more than one node this way.
• When you order transitions with SequentialTransition, use PauseTransition to build in delays between timelines or transitions.
• To create movement around the screen that appears to be random, use a ParallelTransition that contains two TranslateTransition instances, one for horizontal movement and one for vertical movement. Vary the duration of the transitions, and optionally set the timeline's autoreverse variable to true.

API Documentation

• ParallelTransition
• SequentialTransition
• Timeline

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

---