Animations (item-based, timeline-based, advanced and 'draggable')

Basic Animations

Item animations

Proto.io allows you to animate any UI item on your 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 callback, that could be any time of action including animation. Additionally, callback events can have their own callback event. This is very useful when you want to do a series of interactions that will follow each previous interaction on completion. Callback interactions 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.

 

Animation types

Move item

The “move item” animation action allows you to move an 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 it’s 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. Each 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. You have the following options for easing functions:

 


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 thunder symbols at the beginning and at the end of the transition (in timeline).

 

Advanced Animations

Animating filters and adjustments

There are two ways to animate filters and adjustments.

One is through state transition, where <start_state> differs from <end_state> in terms of the desired filter and adjustment values.

The other is by setting an interaction at the point you want: choose action ‘Change property’, the UI item you wish to animate as ‘Item’ and then choose ‘Property’ → <filter> or <adjustment>. You can specify the desired duration, easing and delay.

 

Using variables in animations 

You can have a variable affect your animation, as follows. Make sure you first create a variable and that it’s set to get a value at some point before the desired animation. More on variables here.

Then create an interaction on the UI item you wish to animate, such that action is ‘Change property’, you choose which property and ‘Value type’--> ‘Read from variable’ → <variable_name>. You can specify the desired duration, easing and delay.

 

Making UI components draggable

To make a UI component draggable you need to first check the relevant checkbox in the Properties Inspector.

Screen_Shot_2017-07-06_at_3.16.41_PM.png 

‘Drag axis’ allows you to limit the movement. If you choose “Rotation” and select “Limit rotation” you can specify the angles to limit this rotation.

‘Snap to grid’ allows you to specify the snap angle.

“Bounds” allows you to specify constraints.

‘Continue motion on release’ makes your component move a bit more to the direction you were dragging, even when you‘re not dragging anymore.

‘Lock direction on drag start’ makes your component draggable only towards the direction that you start the dragging movement.

‘Bring to front on drag’ makes the component you drag come to the front of all other components.

‘Snap to grid’ makes your draggable component snap to a grid that you specify (row and column size in pixels). ‘Move only on snap intervals’ makes your component instantly stop when snapping to the grid.

 

Also see the “Introducing Draggable” video 

As well as “Draggable rotate” video

 

Have more questions? Submit a request