Using transition layers

Transition layer is used for creating transitions between layers. It shows the contents of one of its child layers or a transition between two of its child layers. At initial state, the transition layer displays its child layer you set in the transition layer properties. When a transition is initiated, the displayed contents change to the contents of the target layer through a transition you can define.

Creating a transition between layers using a transition layer

To create a transition between layers using a transition layer:

  1. In the Project right-click the object where you want to create a transition layer and select Create > Transition Layer.
  2. In the Project create under the transition layer the layers between which you want to create transitions.
  3. In the Project select the transition layer and in the Properties set:
  4. Add an interactive UI object to trigger the transition, and use the Transition Layer: Start Transition message trigger to start the transition.
    For example, to trigger the transition with a Button:
    1. In the Project create a Button in your application. See Buttons.
    2. In the Properties click the Add drop-down menu for the Click message type, and select the Transition Layer: Start Transition action.
    3. In the Argument Editor select the Argument Values tab and set the Transitioning Mode to:
      • Next to create a transition to the layer that follows the current layer in the transition layer
      • Previous to create a transition to the layer that precedes the current layer in the transition layer
      • Defined to create a transition to the layer you set in the Layer to Transition to property
    4. In the Argument Editor select the Dispatch Settings tab and set the Routing Target property to the Transition Layer.

Note that if the transition source and target layers are of different sizes, change the size of the transition layer before beginning the transition. During the transition, the size is set by the transition layer. The content is rendered into a framebuffer, which reduces the quality because there is no anti-aliasing.

Setting the duration of the transition

To set the duration of the transition:

  1. Create a transition between layers. See Creating a transition between layers using a transition layer.
  2. In the Project select the transition layer you use for the transition, and in the Properties add and set the duration in seconds in the Duration property.

Using an animation for the transition

You can use an animation for the transition layer transitions.

To use an animation for the transition:

  1. Create a transition between layers. See Creating a transition between layers using a transition layer.
  2. Create an animation that animates the TransitionLayerPhase property between values 0 and 1. See Animating property values.
    Using an animation for the transition you can control the type of transition between layers, including using polynomial interpolation, and going back and forth with the transition.
  3. In the Project select the transition layer you use for the transition, and in the Properties add and set the Transition Animation property to the animation you want to use for the transition.

Creating complex transitions

Creating transitions that use more than just a fade-in transition, you need to create a layer transition material that reads the value of the TransitionLayerPhase property and calculates the transition from one layer to another based on the value of that property. See Transition layer example.

See also

Transition layer example

Layers

Open topic with navigation