State machines
A state machine decides which animation plays. It lives in the Logic workspace, and the runtime runs it the same way in your app.
States and transitions
Every state plays an animation (or nothing). Entry points at the first state; Any State stands for all of them, for transitions that may happen from anywhere. A transition moves to another state when its conditions hold, after an optional exit time (how much of the animation must have played), cross-fading for its duration.
Inputs
| Kind | Holds | Typical use |
|---|---|---|
| Bool | true or false | Hovered, toggled, playing |
| Number | a number | Speed, progress, level; compare with <, >, = |
| Trigger | fired for one step | Tap, submit, play once |
Your app sets inputs through the runtime; inside the file, listeners and actions set them.
Listeners
A listener watches a shape (or a group) for a pointer event and runs actions: set or toggle an input, fire a trigger, set a view model property, report an event to your app.
| Event | When |
|---|---|
| Enter / Exit | The pointer moves onto or off the shape. |
| Down / Up | A press and its release; Up also goes to the shape that got the Down. |
| Click | Down and Up on the same shape. |
| Move / Drag | The pointer moves over it, or while pressed after a press on it. |
A press reaches every shape under the pointer. Mark a listener opaque so the shapes behind it do not get the press too.
Layers
A machine can have several layers, each its own graph running at the same time: one for the character, one for the background, one for a hover glow.
An example
The Hatch sample (on the Home screen and on our home page) has states egg, excited, hatching, chick and chirp. Pointer Enter and Exit on the egg set the hover Bool, a press fires tap, and a press on the sky fires again from Any State. A second layer plays the sky.