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