Back To Videos

Multi-screen Prototypes

Tutorial length - 1:21 minutes

You can use layer groups and animations in Pixate to build a prototype that transitions through several different vies, each with their own set of interactions.

There's a lot going on in this example, so we'll cover just a few of the high-level concepts. The main purpose of this demo is to demonstrate that longer flows are easy to build using the concepts for previous videos.

All size, position and conditional values used are specific to a prototype designed for an iPhone 5.

Moving between screens

    This prototype consists of four groups of layers: the red nav at the top of the page, the news feed, a profile page, and a photo carousel.

    The first transition moves from the feed to the profile page. The user taps a profile picture (small blue box on the left) to view their profile. To get back to the feed, the user taps the back button (small grey box at the top left).

    The nav is animated by a Fade and Move, which is linked to the same interaction that moves the profile page into view.

    These Move animations shift the group of layers for the profile page. The first animation moves the profile page in when the profile picture is tapped. The second animation returns to the feed when the back button is tapped.

    This set of animations moves and fades the nav title (black box on the feed page) in and out when you switch between the feed and profile pages.

    Fade out and Move out are timed to make the nav title appear to transition into the back button. Really the layer is just moving and fading out as the back button fades in and takes its place.

Viewing a Post

    When the user taps on the first post, the background goes dark and the image scales and centers. This example utilizes the Tap interaction and two versions of the same image for the zoom. We used two versions of the same image in this example so we could cover the entire layout with the darkened background and still have the zoomed image appear in front, but we now support a Reorder animation which would let us reorder and scale a single profile image.

    The background fades in when the image is tapped and fades out when the zoomed image is tapped. This works just like the back button in the previous example.

    A total of six animations are used to fade, scale and move another instance of the picture layer into view when the post is tapped. All of them have 0 duration and the Spring easing curve is used to animate. The first three (pictured) initiate when the post is tapped. The last three "reverse" the animation in a similar manner.

    The Fade animation changes the zoomed image's opacity from 0% to 100% instantly. This is to make sure the post image is covered up by the zoomed image.

    The Scale animation is used to simulate zooming. We use a spring easing curve to give the zoom a bit of a bounce.

    The Move animation moves the zoomed image into the center of the screen, since it starts out off-center.

Viewing an Image Album

    When the user taps on the profile picture (orange square), a scrollable album comes up from the bottom. This uses a Tap interaction on the profile picture and just moves the album group onto the screen.

    A scroll with paging is used for the album and the light grey box at the top has a Tap interaction that dimisses the album.