Skip to main content

Describing States

In Milease, you can switch between two states using the MilStateAnimator, which will apply transition animations.

Describing States with Boolean Expressions

The syntax is as follows:

MAni.States(() => 
obj.member == val &&
obj.member == val &&
...
);

For example, if we need to describe a state where:

  • The background color is white
  • The text color is black
  • The letter spacing is 5f

It can be written as:

MAni.States(() => 
background.color == Color.white &&
text.color == Color.black &&
text.characterSpacing == 5f &&
);

By default, the animator will use Quad In easing for the transition. If you want to use other easing functions, you need to write it like this:

MAni.States(() => 
(obj.member == val || MAni.Ease(easeFunction, easeType)) &&
obj.member == val &&
...
);

For example, if we want to describe a state where:

  • The background color is white (using Back In easing)
  • The text color is black (using Cubic Out easing)
  • The letter spacing is 5f (using Quad In easing)

It can be written as:

MAni.States(() => 
(background.color == Color.white || MAni.Ease(EaseFunction.Back, EaseType.In)) &&
(text.color == Color.black || MAni.Ease(EaseFunction.Cubic, EaseType.Out)) &&
text.characterSpacing == 5f &&
);
info

How does this work?

The passed boolean expression is parsed as an Expression<Func<bool>>. By continuously expanding expression nodes and using reflection, related members and target values are obtained.

Describing Substates with Extension Methods

Besides using boolean expressions to construct states, you can also construct them using extension methods on object types:

object.MilState(x => x.member, value, [easeFunction], [easeType]);

The first parameter is similar to the basic animation description method; it is a member selector used to specify the member.

Using the same example to describe a state where:

  • The background color is white
  • The text color is black
  • The letter spacing is 5f

You can write it as:

new []{
background.MilState(x => x.color, Color.white),
text.MilState(x => x.color, Color.black),
text.MilState(x => x.characterSpacing, 5f),
};

Similarly, if you want to customize easing types:

  • The background color is white (using Back In easing)
  • The text color is black (using Cubic Out easing)
  • The letter spacing is 5f (using Quad In easing)

You can write it as:

new []{
background.MilState(x => x.color, Color.white, EaseFunction.Back),
text.MilState(x => x.color, Color.black, EaseFunction.Cubic, EaseType.Out),
text.MilState(x => x.characterSpacing, 5f),
};