AnimationUI

AnimationUI is a unity tool to create UI animation easily with no code. You can simply drag and drop to create some smooth UI animation. There are some option that you can set such as the easing, duration, etc. It basically consist of a component that has an array of sequence that has an array of task. This may be special for UI, but it's also possible to animate values for non UI component like transform. You can also make a custom sequence for non UI component with UnityEvent including the dynamic one. Adding function to call at certain time or at the end of animation is also possible with code.

🕹️ Demo Preview

✨ Features

• Sequence for Animating values of RectTransform, Image, Camera, CanvasGroup, Transform, and Dynamic UnityEvent.
• Sequence for instant method such as Set Active All Input, Play SFX, Wait before executing next sequence, Set Active GameObject, Loading scene, and UnityEvent
• Preview animation in edit mode with Progress bar both globally and in each sequence.
• Reorderable sequences.
• Addable function to call at the end of animation or at certain determined time.
• Public variables for every sequence.
• Custom ButtonUI as bonus.
• Demo.
• Others.

📘 Instruction

• Right click -> UI -> Create AnimationUI, or you can just add the AnimationUI Component to a gameObject
• Choose the kind of sequence you want.
• If you choose animation, assign the kind of component you want to animate to the inspector of the AnimationUI component.

• It's recomended to to to lock the inspector so that animating the values is easier.
• You can capture the start values by clicking the set start button.
• You can also capture the end value by changing the value, then clicking the set end button.

• Drag the progress bar to see how would the animation look like.
• You can also play the animation in edit mode, but make sure the scene view is open or the animation might have some lag.

• Try looking at the demo for examples. But make sure the "Level1" scene is added in the build settings or you can't load the "Level1" scene
• There are also progress bars for eace sequence in the left side of the sequence.

• Try comparing the upgrade menu and the settings menu of the demo.
• Notice that those settings position is always relative to the left side or the right side, but then it becomes relative to the middle of the screen.
• In the upgrade menu of the demo, there's also a similiar scenario with the settings menu.
• if you're not sure how to create this, you can always capture all variable with the set start or the set end button. One example is when you want to animate Rect Transform with Anchor Presets of stretch. just try enabling all variable and set everything, you might be able to produce a similiar result with the settings or upgrade menu in the demo.

• You can create the animation in a short time by utilizing some tricks with Unity built in list in the inspector. For example adding a new sequence will automatically copy the previous, it can be quick if the sequence is similiar with the other. Or doing something like creating many copies of wait sequence before using them.

• With this tool, you can also create sequence that set active all input, play sfx, wait before executing next sequence, set active gameObject, loading scene, and do custom things with UnityEvent with each of them having different color.

🔍 API Reference

Get the reference by

using DhafinFawwaz.AnimationUILib;

public class Something : MonoBehaviour
{
    AnimationUI _animationUI;
    void DoSomething()
    {
        _animationUI.Play();
    }
}

🔗 Syntax

Methods	Description
Play()	Play the animation
PlayReversed()	Play the animation but reversed. Usefull to go back from a certain menu quickly.
AddFunctionAt(float time, Action func)	Add a function to be called at a certain time after the AnimationUI.Play() is called

Member Properties	Type	Description
OnAnimationEnded	Action	Callback when the latest wait sequence is finished. It's intended like this so that you also have an option for this case and not just at the very end of the whole sequences. If you want to make it get called at the end of the whole sequences, you can either call AddFunctionAt(_animationUI.TotalDuration, func) or just add another wait sequence as the last sequence in the inspector

Static Properties	Type	Description
OnSetActiveAllInput	Action<bool>	Play the animation
OnSetActiveAllInput	Action<bool>	Play the animation
OnPlaySoundByFile	Action<AudioClip>	Play the animation but reversed.
OnPlaySoundByIndex	Action<int>	Play the animation but reversed.

There's still no proper way to disable all input so if you also want to disable input other than mouse and touch, please modify AnimationUICustomizable.cs. You can also subscribe the static event of AnimationUI which are OnSetActiveAllInput, OnPlaySoundByFile, or OnPlaySoundByIndex to change its behaviour. Example of how to achieve this is in the Demo folder which is AudioManager.cs. Most of the variable in the Sequence class is modifiedable, so it's possible to change the values of _animationUI.AnimationSequence[MyIndex].MyVariableName on runtime.

📖 Examples

Play the animation, call LoadSceneWithLoadingBar() after animation finished.

_animationUI.OnAnimationEnded += LoadSceneWithLoadingBar;
_animationUI.Play();

Subscribe to customizable AnimationUI events.

void OnEnable()
{
    AnimationUI.OnSetActiveAllInput += SetActiveAllInput
    AnimationUI.OnPlaySoundByFile += PlaySoundByFile
    AnimationUI.OnPlaySoundByIndex += PlaySoundByIndex
}
void OnDisable()
{
    AnimationUI.OnSetActiveAllInput -= SetActiveAllInput
    AnimationUI.OnPlaySoundByFile -= PlaySoundByFile
    AnimationUI.OnPlaySoundByIndex -= PlaySoundByIndex
}
void SetActiveAllInput(bool isActive)
{
    Debug.Log("SetActive");
}
void PlaySoundByFile(AudioClip clip)
{
    Debug.Log("Playing " + clip.name);
}
void PlaySoundByIndex(int index)
{
    Debug.Log("Playing clip at index " + index.ToString());
}

📃 Note

• There's still no proper way to disable all input so if you also want to disable input other than mouse and touch, please modify line 9, 14, and 19 of AnimationUICustomizable.cs
• There's a bonus component for ButtonUI
• There's also reverse sequence button usefull to go back from other menu.
• Make sure to press the preview start because you may accidentally do something like disabling all input
• Theres progress indicator individually in the left side of the sequences.
• Toggling PlayOnStart to true is usefull for transition to a new scene.
• You can delete the Demo folder just fine. But make sure to modify AnimationUICustomizable.cs or subscribe to the static event of AnimationUI which are OnSetActiveAllInput, OnPlaySoundByFile, and OnPlaySoundByIndex.

📝 License

MIT