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),
};