UIStateItemAnimation

CJFinc.UItools.UIStateItemAnimation

UIStateItemAnimation allows to animate UIStateItem state change transition

It subscribes to UIStateItem.OnStateChange event and launches transition animation between two states.

While animation process new values are calculated for enabled animation fields for each Update.

Animation parameters

Duration parameter defines the total animation duration in seconds.

”Start delay” parameter allows to add delay in seconds before animation start.

The “Value change speed curve” is used to calculate transition parameter value over the animation time.  It sounds weird, but next examples will show that it’s simple.

Let’s imagine that we need to move object horizontally from left to right.

This curve will animate our movement evenly

This one will make movement slowed down at the beginning and speeding up at the end of animation

And finally this curve will make movement fast at the beginning and slowing down at the end

UIStateItemAnimation contains a predefined custom curve that uses for almost all modern UI transitions

It produces the next animation

Animation fields

Currently UIStateItemAnimation supports the next components with values

You can send request to add a new components and values to me by email cjf.nosp@m..inc@gmai.nosp@m.l.com

To use component value in transition, open “Animation fields” group and simply select needed fields

It’s also possible to change it at runtime animationFields

UIStateItemAnimation anim = GetComponent<UIStateItemAnimation>();

anim.animationFields.CanvasGroup_alpha = true;

Animation states

UIStateItemAnimation displays all states from UIStateItem component with all enabled animation fields.

You can define each state field value in editor

or at runtime through AnimationStates

UIStateItemAnimation anim = GetComponent<UIStateItemAnimation>();

anim.AnimationStates[UIStateItem.STATE_ACTIVE].CanvasGroup_alpha = 1;
anim.AnimationStates[UIStateItem.STATE_INACTIVE].CanvasGroup_alpha = 0.3f;
anim.AnimationStates[UIStateItem.STATE_DISABLED].CanvasGroup_alpha = 0;

To set all RectTransform values in one click from current object position there is a magic button presented in editor

You also can do it at runtime

// set RectTransform fields values for UIStateItem.STATE_ACTIVE state
GetComponent<UIStateItemAnimation>().SetAnimationStateRectTransform(UIStateItem.STATE_ACTIVE);

Animation transition testing

Animation testing is possible with help of UIStateItem states testing options in editor mode

as well as in player mode

Animation examples

(TBD) Short video examples how to setup animation for different components

  • RectTransform
  • CanvasGroup
  • LayoutElement (vertical layout group)
  • LayoutElement (horizontal layout group)

Callbacks

UIStateItemAnimation implements callback event OnAnimationFinished that called after animation is finished

Details

This component require the UIStateItem to be attached to the same game object

Summary
UIStateItemAnimationUIStateItemAnimation allows to animate UIStateItem state change transition
Variables
animationDurationAnimation transition duration in seconds
animationStartDelayAnimation transition start delay in seconds
valueChangeSpeedCurveAnimationCurve that defines value change speed for animationDuration
animationFieldsAnimationFields stores what fields are used to animate states transition
Properties and Functions
AnimationStatesAnimationState array stores all enabled animationFields fields for each UIStateItem state
SetAnimationStateRectTransform (state, rectTransform)Sets all RectTransform related fields in AnimationStates for specified state
IsAnimationActiveIndicates is animation currently active or not
Variables
OnAnimationFinishedThis UnityEvent is called when animation transition is finished

Variables

animationDuration

public float animationDuration

Animation transition duration in seconds

animationStartDelay

public float animationStartDelay

Animation transition start delay in seconds

valueChangeSpeedCurve

public AnimationCurve valueChangeSpeedCurve

AnimationCurve that defines value change speed for animationDuration

animationFields

public AnimationFields animationFields

AnimationFields stores what fields are used to animate states transition

Properties and Functions

AnimationStates

public AnimationState [] AnimationStates { get }

AnimationState array stores all enabled animationFields fields for each UIStateItem state

Note: You can’t change a AnimationStates array size.  The AnimationStates array size is always equals to UIStateItem.States array size and controlling automatically.

SetAnimationStateRectTransform (state, rectTransform)

public void SetAnimationStateRectTransform(string state,  
RectTransform rectTransform =  null)

Sets all RectTransform related fields in AnimationStates for specified state

If rectTransform parameter is not defined, the RectTransform of current game object will be used.

Parameters

statestate name to fill RectTransform fields in AnimationStates
rectTransformobject to gather RectTransform fields from

IsAnimationActive

public bool IsAnimationActive { get }

Indicates is animation currently active or not

Variables

OnAnimationFinished

public UnityEvent OnAnimationFinished

This UnityEvent is called when animation transition is finished

You can subscribe any of your functions to this event.

GetComponent<UIStateItem>().OnAnimationFinished.AddListener(OnAnimationFinished);

...

void OnAnimationFinished() {
    Debug.Log("Animation finished!");
}
UIStateItemExtention is a mediator class of all UIStateItem extension classes
UIStateItemAnimation allows to animate UIStateItem state change transition
UIStateItem implements different UI item states and provides API to switch between them.
public float animationDuration
Animation transition duration in seconds
public float animationStartDelay
Animation transition start delay in seconds
public AnimationCurve valueChangeSpeedCurve
AnimationCurve that defines value change speed for animationDuration
public AnimationFields animationFields
AnimationFields stores what fields are used to animate states transition
AnimationFields is a helper class to store and serialize enabled animation fields for UIStateItemAnimation
public AnimationState [] AnimationStates { get }
AnimationState array stores all enabled animationFields fields for each UIStateItem state
AnimationState is a helper class to store and serialize animation UIStateItemAnimation fields for each UIStateItem state
public void SetAnimationStateRectTransform(string state,  
RectTransform rectTransform =  null)
Sets all RectTransform related fields in AnimationStates for specified state
public bool IsAnimationActive { get }
Indicates is animation currently active or not
public UnityEvent OnAnimationFinished
This UnityEvent is called when animation transition is finished
public UnityEvent OnStateChange
This UnityEvent is called on each state change
public string [] States { get }
String array of states names
Close