UI Animation Controls

Introduction to Animation Controls

The Animation control can be used to achieve 2D UI animations by filling in the path of the animation in the control's properties to specify the animation to be played by the control.

Animations Configuration

You need to configure animation in advance to use it in UI Editor. First create an imageanimations.xml file and put it in the skin folder, edit the file as follows to configure the animation:

Wrap several ImageFrame tags with Animation tag, the Animation tag represents an animation, where the Name represents the name of this animation, the Info represents the information of this animation, and IsPng represents whether this animation is in format of Png, IsDynamicCreate represents whether this animation is created dynamically. ImageFrame represents the animation image used in each frame, FileName represents the path of this image, and KeepTime represents the duration of this frame.

<Animation Name="Blink" Info="Blink" IsPng="true" IsDynamicCreate="true">
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0000.dds" KeepTime="2800"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0001.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0002.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0003.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0004.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0005.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0006.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0007.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0008.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0009.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0010.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0011.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0012.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0013.dds" KeepTime="60"/>
    <ImageFrame FileName="skin_res\animation\Blink\rc\bao_0014.dds" KeepTime="60"/>
        </Animation>

All the animations to be used will be configured into this file, and the animation resources used in the configuration process will be placed under the corresponding paths, so that the animation configuration work is done.

Animation Creation

Open the UI file to be animated in the Editor and find the Animation control in the Control Menu on the right side of the UI Editor.

Select the control, and then left-click on it in the Main Form to create an Animation control.

Then click on the Animation Image property of the control to select the animation.

In the pop-up Select Animation window, select the animation needed to be configured for the animation control.

No.	Description
1	Animations that have been configured in the Editor
2	Animation Preview Window
3	Search Bar

After the animation is configured:

Animation Playing

Configured Animation controls do not automatically play animations by default. Playing configured animations in the scene can be done in two ways:

1. Modify Play Mode property (Auto Play)

   Select the animation control to modify its Play Mode property to Play, then the animation will be played automatically in UI Editor or when entering the scene.

   

2. Animation play controlled by the script (Manual Play)

   Play Mode property can only play the animation once or loop when entering the scene, if you want to play the animation at a certain point after entering the scene instead of playing it as soon as entering the scene, or if you want the animation to play or stop at any point instead of just playing it once or looping all the time, then it is necessary to use scripts to control the playback of the animation.

-- Bind an animation named animation1 to the Animation control
animation_image.AnimationImage = "animation1"

--Loop the animation, it will only play once when the value is set to be false
animation_image.Loop = true

--Play the animation in reverse 
animation_image.Athwart = true

-- Play the animation 
animation_image:Play()

-- Pause the animation 
animation_image:Stop()

-- Remove the animation
animation_image.AnimationImage = ""