FairyGUI not only provides the editing function of static UI, but also provides powerful dynamic editing functions to make your UI easy to move.

Name explanation

Edit transition

In the transition list view, create a new transition or double-click on an transition to enter transition editing mode.

To exit transition editing mode, click the button at the top right of the stage:

During dynamic editing, you cannot add and delete components, and you cannot modify the controller. If the attribute type of the current frame is not “Change Position”, then the component cannot be moved; if the attribute type of the current frame is “Change Size”, then the size of the component cannot be changed.

After selecting a symbol on the stage (or unselecting any symbol, Context in the blank space of the stage), create a timeline from the context menu:

Different types can be created with different components.

Note: There are very few transition types supported by Groups. If you need complex actions, use components instead.

Transition properties

Frame properties

Frame data

Different frame types have different data. Only one type of changing position is introduced here.

The guideline function must be used in conjunction with Tween. Check the guideline function at the start key frame of Tween.

Enter edit guide mode in two ways:

Exit Edit Guideline mode in three ways:

The guideline editing interface is as follows:

  1. Waypoint. You can change the coordinates by holding down the path point and dragging it, or you can enter its coordinates directly in the properties panel:

    Add waypoints: Context on the stage blank and select “Add Points” from the menu;

    Delete a waypoint: Context the waypoint and choose “Delete Point” from the menu.

  2. Control point. You can hold the control point and drag to change its coordinates, or you can enter its coordinates directly in the properties panel. Each path point has two control points. They are connected by a white line. When one of the control points is dragged, the other control point also moves at the same time. This mechanism can make the curve change smoothly at this point.

If you need to cancel this smoothing function, uncheck “Smooth” in the context menu:

At this time, if you move the control point again, you will find that the two consoles no longer move at the same time, so that the curve can make a larger turn:


Transition playback is started in the code, for example:

Transition trans = aComponent.GetTransition(“peng”);

Play has a variety of prototypes, for example, it can be played a certain number of times, and it can be called back when the playback ends. E.g:

// There is a callback at the end, but it should be noted that if there is a nested transition in the transition or there is a loop content, it will not be called back until all are finished.
    trans.Play (callback);

For example, you can play part of the transition by specifying a time range, such as:

// Play the transition from 0.5 seconds to 1.5 seconds, that is, all frames between 0.5 seconds (inclusive) and 1.5 seconds (inclusive).
    trans.Play (1, 0, 0.5, 1.5);

The time range can be hard-coded or specified by a label. You can get the time point of a label through GetLabelTime.

It is also possible to place it upside down, but note that you need to perform an upright placement before placing it upside down. E.g:


Transition can be paused, for example:

// Pause transition
    trans.setPaused (true);
    // Resume transition playback
    trans.setPaused (false);

To stop the transition playback in the middle, you can call:


The Stop method can also take parameters. The prototype is:

public void Stop(bool setToComplete, bool processCallback);

setToCompleteIndicates whether to set the status of the component to the completed status. If not, the status of the component stays at the current time. processCallbackWhether to call the callback function passed by the Play method.

Note: After the UI transition is finished playing, the state of the component will stay at the last frame, instead of returning to the first frame. If you want the state of the component to return to the state before playing after the transition is played, you need to add a frame again Sets the status of the component. For example, for a motion effect, the design is to change the transparency from 1 to 0 after 1 second, then the transparency will be 0 after the transition effect ends. Some people will ask how to make the transition go back to the first frame, that is, the transparency must be equal to 1, which is very simple. Add a frame at the end of the transparency timeline and set the transparency to 1. Then the transparency is 1 after the transition is finished .

If you need to modify the attribute value of a keyframe, you can use:

// For example, the label of a frame is aa, this frame is set to the XY value of a certain element, and the XY value is changed to 100,200.
    trans.SetValue ("aa", 100, 200);

Can modify the duration of a Tween, but modify the time of a Tweenwill notPostponing subsequent Tween. E.g:

// Modify the duration of a Tween to 0.5 seconds. Note that the label should be on the start key of Tween.
    trans.SetDuration ("aa", 0.5f);

You can trigger a callback when the transition reaches a certain frame, for example:

// When the key frame labeled aa is run, a callback is triggered.
    trans.SetHook ("aa", callback);

You can modify the target object of a motion effect tag for a motion effect, but you must be aware thatTo be called when the transition is stopped,E.g:

trans.SetTarget ("aa", newTarget);

In Unity, the transition playback speed is not affected by Time.timeScale by default, but you can also set it to be affected:

trans.ignoreEngineTimeScale = false;

You can also set the dynamic timeScale separately, for example:

// The transition playback speed will be half of the original speed.
    trans.timeScale = 0.5f;