To optimize my developement I created a system for smooth UI Animations where you are able to design visually the animation path of the UI element. This system is still in development and I want to add more features like fading or pulsation.
My goal was to build faster and appealing animations I lost a lot of time. So I decided to make this process faster and start to programm my own UI Animation system where I only have to click few buttons to get animations for each object I want.
My First step was to create an Animator Object which has an implemented state machine. Depending on this state machine all UI elements do their animation. Currently I implemented 5 states GameOverScreen, isPlayingMode, isShop, AppStart.
To communicate with this UI Animator object I developed an UI_Animation_Modul which I attached to every UI element. These objects are using this system. So what kind of values do we have here:
Shop = check this to mark the UI element as a shop Panel then this element will appear when UI_Animator has the state isShop.
Lerp Speed = Set the speed of the animation
Use Delay/There is Delay = If you want to wait before animation should start
Current start and end points = Sets the startPoint and the EndPoint of the animation
Is Object Visible On Start = Should the object be on his start or end point?
This is a slideshow. Click to make the image bigger (Commented out code):
Here is an example where I use my system. There is a smooth sliding Title and play button which are animated automatically depending on state.