Facebook

The purpose of this homework is to leverage animations and gestures to transition between screens. We're going to use the techniques from this week to implement some interactions in Facebook.

Time spent: 7.5 hours

Features

Required

  • Tapping on a photo in the news feed should expand the photo full screen.
  • Tapping the Done button should animate the photo back into its position in the news feed.
  • On scroll of the full screen photo, the background should start to become transparent, revealing the feed.
  • If the user scrolls a large amount and releases, the full screen photo should dismiss.

Optional

  • The full screen photo should be zoomable.
  • The user should be able to page through the other photos in full screen mode.

The following additional features are implemented:

  • Double tapping on full screen photo to zoom in or out, based on current zoom level

Please list two areas of the assignment you'd like to discuss further with your peers during the next class (examples include better ways to implement something, how to extend your app in certain ways, etc):

  1. How other people handled the transition between the feed view and the image detail view (creating a new view, animating existing views, etc)
  2. Implementation details for the final optional, scrolling through other images. I'm leaning towards collection views for implementation.

Video Walkthrough

Here's a walkthrough of implemented user stories:

Video Walkthrough

GIF created with LiceCap.

Notes

This project was fairly challenging, partially due to how many ways the milestones could be implemented. The tasks seem straightforward, but I had to do some digging and outside research (more than usual) to get things working in a way that I liked.