This example will explain how to create a simple animation (state transition in Proto.io terms) like the one seen below, where a progress bar goes from empty to full. This can be found in the Sample Project available for importing in your Dashboard.
You first need a screen with a State 1, in which you include a progress bar UI component from the iOS 9 Library. In the example, we've also added an image and some text. Make sure that in the Progress bar properties, 'Progress (%)' is set to 0.
Then duplicate this state, to create State 2.
State 2 is identical to State 1 initially. Viewing State 2 in the canvas, select the Progress bar and change the 'Progress (%)' setting to 100. You will see the progress bar appear as full.
Change to the STATE TRANSITIONS tab (next to SCREEN STATES). Click on +NEW STATE TRANSITION.
In the modal that pops up, just click CREATE to create the transition from State 1 to State 2.
You will see the transition timeline open. Here you can modify various settings concerning the UI items and their properties that take part in the transition. By default the duration of the transition created for you is 250ms. But you can modify that by dragging the 'end' handle to the right or left (example shows the duration extended to 1.5s).
Initial duration 2.5ms
Extended to 1.5s
Use the controls (Play > ) to preview your transition. You can see the preview directly on the canvas.
That's it! You successfully created a simple but impressive transition.
Note: Although you will be able to preview the transition in the timeline, it has to be triggered in your prototype for it to play. This can be achieved through a relevant 'Change Screen State' or 'Change Container State' interaction, applied on a screen or a UI component.
In the example described above that comes from the Sample Project, the interaction is placed on the screen ('Placing Order') as seen in the image below: 'On Screen Show' -> 'Change Screen State' of 'Placing Order' to 'State 2'.
This interaction (triggered when the prototype shows the particular screen) will cause a change of screen state from State 1 (initial) to State 2, through the transition specified.
Learn more about state transitions and animations.