Animations

 

Item animations

Proto.io allows you to animate any UI item on your prototype's screen. There are five animation types that can be used: move, scale, resize, fade and rotate. Each animation type can be implemented with one or more animation methods.

For each animation, you can set the duration of the animation, the easing effect, and the start animation delay. You can also set your animations to do loop iterations and repeat the animation step(s). Each animation can have a callback, that could be any time of action including animation. Additionally, callback actions can have their own callback action. This is very useful when you want to do a series of interactions that will follow each previous interaction on completion. Callback actions are called on the completion of the interaction that called them.

There are two actions for animations, ‘Animate item’ and ‘End loop sequence’ that can be used to set animations and stop animation loops respectively and another action called ‘Move whole screen’, which is mainly used when you need to show/hide a side menu.

Animation actions that are set on the same event run simultaneously. For example, on ‘tap’ you can set an item to move, rotate and scale at the same time.

mceclip0.png

Example interaction that animates item

 

Animation types

Move item

The “move item” animation action allows you to move a UI element on the screen. There are three methods for moving items.

Move to (x,y) coordinates

Using this method you can move an item to an exact location of x and y coordinates. There is no maximum or minimum values for x and y as you are allowed to move the item off-screen boundaries. You can also set negative values for x and y. The top-left position of x and y in your screen is 0,0.

Move by (x,y)

This method allows you to move an item right, left, up or down by defining the number of pixels you want to move the item. You can use negative values for x to move the item left and positive to move the item right. Negative numbers for y moves the item up and positive down. You can use the * value for x or y if you don’t want to change the value of x or y accordingly.

Move to animation target

Move to animation target allows you to move an item to a target that has been previously set on the canvas using the “Animation Target” component found in the basic components of any component library. The top-left corner of the item to animate will move to the top-left corner of the animation target.

Scale item

The “scale item” animation action allows you to scale a UI item by defining the x and y factor for scaling. The x and y factor can range from 0 to any number. Number 0-1 will scale the item down (make it smaller) whereas number greater than 1 will scale the item up (make it larger). The item position when scaling remains centered based on the center point of the item.

Resize item

Besides scaling, there are two ways to resize an item by changing its width and height.

Resize to (width,height) dimensions

This action will allow you to set the new width and height that your item will have after the animation is complete.

Resize (width,height) dimensions by (x,y)

This action when triggered will increase or decrease the width/height of your item by x and y pixels accordingly. Negative values denote decrease and positive values denote increase in width/height.

Fade item

The “fade item” action allows you to change the opacity of an item. Possible values are 0 to 1. For example, decimal number 0.5 represents 50% opacity.

Rotate item

There are two rotate animation actions available.

Rotate to (x) degree rotation

This action allows you to rotate an item to the degrees set. Values may range from -360 to 360. Negative values will rotate the item counter-clockwise and positive values will rotate the item clockwise.

Rotate by (x) degrees

This action will rotate the item by x degrees. Each time the same action is fired then the item rotates x degrees. Possible values are any integer number negative or positive. Every 360 degrees the item rotates a full circle, i.e. rotate by 720 degrees will rotate the item two times.

 

 

 Timeline-based animations

You can also animate UI components using States (see Screen and Container states) and the Timeline. You need a State 1 (start state) and a State 2 (next state). You will be designing the animation that will take you from State 1 to State 2. For this, you can work on the timeline and the layers list there to change their individual properties (they expand/collapse when you click on the little arrow) and set the duration of the animation, delay (time after which to start) and easing function (type of animation). Each layer and property can be treated separately. See Easings for more on tailoring your animations.

Screen_Shot_2017-09-18_at_11.20.34_AM.png

You will also need to create a trigger for taking you from Start state to Next state. This can be any UI component that appears in Start state on which you create an interaction “on event <choose_an_event> change state to <end_state>”.

You can preview your animation straight away by clicking on Play. You also have the Rewind and Jump to end buttons that are particularly useful for longer animations. You can also drag the Playhead to the position you want.

The Reverse checkbox appears when you create the opposite of a particular transition, e.g. when you have a transition 'From <State 1> To <State 2>' and you then create the transition 'From <State 2> To <State 1>'. When you check Reverse you will see that the reverse of transition 'From <State 1> To <State 2>' is brought up in your timeline automatically. You can still edit this as you like. If you later uncheck that checkbox, that transition is removed from the timeline and any previous transition is restored.

In the timeline you can see the following indicators:

Transition with 0ms duration. Drag the grey handles to increase duration. Drag and move from the middle to move position.
Transition with duration (e.g. 90ms). Drag the grey handles to change duration. Drag and move from the middle to move position.
Instant. Transition can't be applied to this UI item/property. 
Instant. The UI item/property is re-rendered at this point. 

'On transition start' and 'On transition end' interactions can be added (and edited) from the little lightning icons at the beginning and at the end of the transition (in timeline).

Screen_Shot_2017-09-18_at_11.22.16_AM.png

 

 

Have more questions? Submit a request