Adding an Extendable Animation Component

Dont be alarmed by the amount of lines added that github shows, this repo includes various json files with examples to make testing for facepunch easier. this is the main driver between all the lines added

Summary this Fork adds an Animation Component that allows you to animate various properties of a UI Panel. it currently supports:

8 Types of Animation
- Opacity
- Color
- Scale
- Rotate
- Translate & TranslatePX
- MoveTo & MoveToPX
Easing Functions
- Common Easing Function (Linear, EaseIn, EaseOut, EaseInOut)
- Custom Bezier Easing (see https://cubic-bezier.com/ for a visual tool)
6 Optional Triggers [OnClick, OnHoverEnter, OnHoverExit, OnDestroy, OnDrag, OnDrop],
delay, repeat & repeatDelay

https://user-images.githubusercontent.com/33698270/210734508-634926e6-64e8-4446-8108-04c9b84d80a1.mp4

Why?

Removing the static feeling from UIs UI heavy plugins often feel very static, once the UI is on the screen it stays idle until either the server or player does something

Creating Viability Its already possible to create animated UIs with current features, as fadeIn and fadeOut give a degree of animation, but this comes at the cost of server strain, very limited possibilities & a difficult developer experience

Setting the foundation The Component was designed without focusing on a single usecase, instead trying to be as versatile as possible to allow anyone to benefit from it, its intent is to let any developer make more pleasant UIs that are cleaner, more efficient & more interactable. the animation logic is generalized, so that adding new animation types can be easily added

The Breakdown

this fork introduces a few new Classes:

The Animation Component
- this component drives all animations for a panel & interacts with the Mouse Listener to start & stop animations
The Mouse Listener Component
- Can be attached to any panel, communicates with Animation Components to start Animations on click & hover
AnimationProperty Class
- hold the Data for each animation & the code to execute them, an Animation Component can hold an unlimited amount of properties
BezierEasing Class
- Enables Custom Easing, based on the CSS implementation

to use the animation system, a developer can add the component by using the following Json Representation

{
  "type":"Animation",
  "addCanvasGroup": false, // adding a canvas group means that the Opacity animation Type will also affect children
  "properties": [
    {
      "trigger": "OnCreate", // when this animation should start playing, defaults to immediately (OnCreate)
      "target": "NameOfThePanelToListenFor" // optional, only required to enable OnClick, OnHoverEnter, OnHoverExit, OnDrag & OnDrop Triggers to work
      "duration" : 1.0, // how long the animation lasts, Required
      "delay" : 1.0, // the initial Delay, optional (Default = 0.0)
      "repeat" : 5, // how often to repeat the animation, optional (Default = 0), set to -1 to repeat indefinitely
      "repeatDelay" : 2.5, // the delay before it repeats again, optional (Default = 0), combine with duration to get the interval the animation plays on
      "type" : "Opacity", // the type of animation, required
      "easing":  "Linear",  // the easing function the animation will use, optional (Default = "Linear"), supports preset functions or Custom Bezier
      "from" : "0.0", // an initial value to transition to, optional (default = the current value of the property)
      "to" : "1.0", // the value to animate to, required
    }
  ]
},

Note: Some Animations dont Affect their Child Panels, Like Color & Opacity, this comes down to technical implementation

Animation Components can be be used with multiple Properties to create complex Animations

Usecase & Comparison

Animations are a great way to make your UIs more pleasing to look at & snappy. but what's more important is that they bring interactivity to your UIs. the ability to listen to hover, click & drag Events allows you to Create more intuitive UI that feels dynamic & responds to the user.

It allows you to create:

Hoverable Tooltips
Better Togglable Menus
Better Modals & Popups
Better Tabs, Pages

https://user-images.githubusercontent.com/33698270/210732498-bb5a43f3-a0fa-4345-bcfb-72edf70f07fa.mp4

without this PR, when presenting lists & content on multiple pages we have to utilize console commands to update the page for the player. this PR allows developers to send all the pages & content at once (within reason) & letting the animations take care of switching pages, opening dropdowns & modals. this reduces the requests needed & makes the UI feel snappier.

All of the code in this fork have been fully tested by recreating the CUI system in unity, meaning that they should mostly work out of the box, this fork will also include 2 json files:

to recreate the Feature Showcase
to recreate the Interactive Component Example

Oct 31 '22 16:10 Kulltero

i made some changes to embrace multiple animation components on the same object instead of restricting them, as they allow us to react to mouse events on different targets.

the new code will attempt to re-use an existing animation component if theres no mouse target specified or an existing component with the same target allready exists

here's a demo of what that allows us to do (https://streamable.com/b5efj7)

Nov 23 '22 00:11 Kulltero

thank you for taking the time to look through it, i really appreciate it!

i've made some of the changes you proposed & replied to some of the comments, but feel free to let me know if i misunderstood or missed something,

i also added a clarification to the BezierEasing file that it is a port from an existing js library (which is ported from gecko), while porting it my main goal was to convert it to C# Syntax which i was able to do without deep understanding of the underlying math/code so the naming & comments mostly stayed the same.

i did dig deeper into it to get a better understanding of the methods used and wrote some comments to address it, but i couldn't find much info on the main Math equation.

Nov 28 '22 10:11 Kulltero