Understand states
States are one of the fundamentals of PandaSuite. They allow you to better control and animate your screens. You can create states in your screens, foregrounds/backgrounds and in a more localized way with the Multi-State component. You move from one state to another using interactions or transitions.
States are useful whenever you want to make changes to a screen or part of your screen.
Creating a linked state
When you create a new linked state, a copy of that state is added and the two states are automatically linked. A link symbol appears below the name and indicates the reference state.
You can also create a blank state, a completely independent blank state.
The principle is the same within a component Multi-state.
Characteristics of a linked state
When you create a linked state from another state, the initial state becomes the parent of the linked state. All objects are then linked between these two states. By default, any modification on state A is automatically applied to state B. To create a transition, you need to make a modification to state B. Concretely between these two states, three links are created for each object:
- Size & Position
- Properties
- Actions
If you change the size or position of an object between these states, a transition applies and the object animates.
You can identify these links and restore them from the Objects window:
Warning: if you import a new object on the linked state or do a copy/paste action, the links are broken and the object becomes completely independent. No transition will be possible on this object.
You can create transitions from any type of graphic objects (images, text, components). Only text magnification is not taken into account.
Change state
To change screen state, you need to create an action.
For an automatic state change, select the initial state and click Actions : Display State> Change State.
If this one is related to a user action (for example a click on the button), select the button and click on Actions : Tap / Click> Change State.
You can assign a delay, duration and animation (acceleration curve, spring) to your transition. To learn more: Animations
If you use the component Multi-state, choose the action: Agrow on a component> Multi-state > Change state.
Default state
State 1 is displayed when your screen first loads. When the user returns to this screen, they will return to the last state displayed.
To set a default state, click on the pin icon or go to the Properties window.
Delete a state
To delete a state, click on the trash can. Be careful with parent and child links so you don't delete a transition.