States are a key feature in Proto.io in terms of giving you more control over your screens (or containers), as well as allowing you to build powerful animations. You can define a number of different states your screens and containers can be in. A single screen (or container) can move from one state to another using particular interactions/transitions.
You should use states when you want to make changes to some of your screen (or container) components only. States can be managed from the bottom pane in the Editor. You also have a thumbnail view option.
State properties
When you add a new state, an exact copy of the last created state is added. If it’s the first state for the particular screen or container, then that copy is the same as your original screen or container.
You can access state properties from the States menu.
Screen state properties include title and background (seen left) whereas container state properties also include dimensions (seen right).
 |
 |
State interactions
You can add interactions to your states and trigger an action when the user enters the particular state, leaves the state, or presses a key while in the state.
You have a large selection of actions to choose from, the most common being 'Go to screen', 'Show item', 'Hide item', 'Animate item', 'Change Screen State' and 'Change Container State'.
You can access the state interactions from the relevant state dropdown menu, the lightning icon that appears on hover when in thumbnail view, or by simply selecting the state thumbnail in the transition timeline view.
State transition interactions, namely 'On transition start' and 'On transition end' are seen separately from state interactions in Proto.io 6; as part of the relevant transition created (see Transitions). They can be accessed from the transition timeline, from the little lightning icons at the beginning and end of the transition (see image below).
Changing states
You can change screen or container states by adding the corresponding interaction on the UI item you wish, or based on screen events (e.g. on Screen show, on Screen hide, etc). You can choose which state to change to (specifically by name, or first, last, next, previous or previously visited). Adding a transition is optional.
 |
 |
Videos
You can also watch the following video tutorials on States: