UIStateItemAnimation.cs

UIStateItemAnimation

CJFinc.UItools.UIStateItemExtention

[ExecuteInEditMode]

[DisallowMultipleComponent]

public

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

UIStateItemAnimation-curve-predefined-transition

Animation fields:

Currently UIStateItemAnimation supports the next components with values

RectTransform (offsetMin, offsetMax, anchorMin, anchorMax)
CanvasGroup (alpha)
LayoutElement (preferredHeight, preferredWidth)

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

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

UIStateItemAnimation-editor-animation-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

UIStateItemAnimation-editor-animation-states-rect-transform

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

UIStateItemAnimation-editor-animation-testing

as well as in player mode

UIStateItemAnimation-player-animation-testing

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

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

[SerializeField]

public AnimationFields animationFields

AnimationFields stores what fields are used to animate states transition

Properties

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.

Functions

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

state string	state name to fill RectTransform fields in AnimationStates
rectTransform RectTransform	object to gather RectTransform fields from

Properties

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!");
}