Overview
Transitions are lists of one or more various types of animated effects to apply to an object. Use them to visually transition an object from one state to another.

Various object types (such as controls and panels) support transitions. Transitions can be edited using either an editor, or an inspector interface (Unity desktop only).

Transition editor

Transition inspector (Unity desktop only)

Select a Transition
To setup a transition, first you must select which transition you would like to setup. This can be done using the "Transitions" popup list. The "Clone" button next to this popup allows you to copy all settings from the currently selected transition to all other transitions in the popup list. After which, any changes you make to the current transition will be automatically reflected in the other transitions. This will continue to be the case until you make a change to one of the other transitions directly, at which point that other transition will no longer automatically pick up the settings of the first.

Add Elements
A transition is composed of one or more "elements". An "element" is an animation effect (internally, each is a class derived from EZAnimation). For a transition to do anything, it must have at least one element. To add or remove elements to to/from the transition, use the "+" and "-" buttons. Once you have added elements, you can select from among them using the popup list next to the "+" and "-" buttons. This is a list of all elements in the selected transition.

Select a Type
There are many types of animation effects you can apply. Below is a list of most such effects:

Delay and Duration
An animation effect (or transition "element") lasts a certain amount of time, specified in seconds. You can also cause the element to loop infinitely by specifying a negative duration. For example, if you specify a duration of -1, the effect will loop every 1 second. Next, choose a delay, also specified in seconds. This is the length of time the effect will wait before starting. This allows you to have multiple effects appear to occur sequentially by delaying one effect to occur after another. Additionally, if delay is set to a negative value, two more options will appear: "Rep. Delay", which repeats the specified delay on each iteration, and "PingPong" which will cause the animation to reverse upon reaching the end.

Easing
The "Easing" popup allows you to select the manner in which the starting value transitions to the destination value. For example, using "Linear" with a "Translate" type will move an object from point A to point B in a linear manner. But using "ElasticOut" will cause the object to move toward point B in a manner that looks as if it is attached to point B by a rubber band. There are too many easing methods to list here, so you are encouraged to experiment with each.
NOTE: Easing is not selectable on some types, such as PunchPosition.

Mode
There are three modes to choose from:

• To - Transitions to a specific target value from whatever the current value happens to be.
• By - Transitions whatever the current values are by the amount specified.
• FromTo - Transitions the object from the specified starting value to the specified destination value.

NOTE: Mode selection is not available for some types, such as PunchPosition.

Set Values
To complete the setup of your transition element, fill in the values at the bottom which are relevant to your chosen type. This varies widely based upon the type of element selected. Note that for most types, these values have a different meaning in the context of the selected Mode. For example, if the type is set to Translate, setting the mode to To will cause the object to move to the specified point in space. But if the mode is set to By, it will move by the specified amount relative to whatever its present location happens to be.

When applicable, a "Current" button will appear below the value field(s) which, when clicked, will paste in the object's current values.

Controls, such as Buttons, allow you to setup multiple transitions per control state. For example, the "Over" state of the Button control allows you to setup a different state when transitioning from the "Normal" state versus the "Active" state. This means you can have one thing occur when coming from one state, and a different thing when coming from another. The currently selected state is always the state being transitioned to, and each transition should begin with "From..." to indicate the state from which it will transition.

UIPanels, and all UIPanelBase-derived panel classes include at least 4 base transition types:

• Bring In Forward - Used to display the panel when a menu is moving in the "forward" direction.
• Bring In Back - Used to display the panel when a menu is moving in the "back" direction.
• Dismiss Forward - Used to dismiss a panel from view when a menu is moving in the "forward" direction.
• Dismiss Back - Used to dismiss a panel from view when a menu is moving in the "back" direction.

When using panels with a UIPanelManager, you can use these transitions to create a smooth-flowing menu or wizard. When moving "forward" in the menu/wizard, the "forward" transitions are used, and when moving backward, the "back" transitions are used.

When using panels apart from a manager, most controls, etc, which interface with panels will use the "forward" transitions by default, so these are the ones you should setup in such a case. Aside from this, you can always initiate these transitions directly from code.

Block Input
The 4 base transitions listed above also have a special "Block Input" selection that appears next to the "Clone" button in the transition editor area. When enabled, this setting causes the UIManager to not process input while the transition is taking place. This is useful to avoid the user accidentally clicking on buttons, etc, as they travel across the screen while a panel is being dismissed/brought in. Input will be re-enabled immediately upon completion of the transition.

Some other panel types, such as UIInteractivePanel, include additional transitions for when the panel enters a given state based upon input. This is very similar to how transitions work for controls.