Mailbox Swipe Interactions

This is a sample of Drobox Mailbox swipe interactions. All images were provided courtesy of CodePath.

Time spent: 10 hours total

Completed user stories:

Required

• [x] Required: Initially, the revealed background color should be gray.
• [x] Required: As the reschedule icon is revealed, it should start semi-transparent and become fully opaque. If released at this point, the message should return to its initial position.
• [x] Required: After 60 pts, the later icon should start moving with the translation and the background should change to yellow.
• [x] Required: Upon release, the message should continue to reveal the yellow background. When the animation it complete, it should show the reschedule options.
• [x] Required: After 260 pts, the icon should change to the list icon and the background color should change to brown.
• [x] Required: Upon release, the message should continue to reveal the brown background. When the animation it complete, it should show the list options.
• [x] Required: User can tap to dismissing the reschedule or list options. After the reschedule or list options are dismissed, you should see the message finish the hide animation.
• [x] Required: Initially, the revealed background color should be gray.
• [x] Required: As the archive icon is revealed, it should start semi-transparent and become fully opaque. If released at this point, the message should return to its initial position.
• [x] Required: After 60 pts, the archive icon should start moving with the translation and the background should change to green.
• [x] Required: Upon release, the message should continue to reveal the green background. When the animation it complete, it should hide the message.
• [x] Required: After 260 pts, the icon should change to the delete icon and the background color should change to red.
• [x] Required: Upon release, the message should continue to reveal the red background. When the animation it complete, it should hide the message.

Optional

• [ ] Optional: Panning from the edge should reveal the menu
• [ ] Optional: If the menu is being revealed when the user lifts their finger, it should continue revealing.
• [ ] Optional: If the menu is being hidden when the user lifts their finger, it should continue hiding.
• [ ] Optional: Tapping on compose should animate to reveal the compose view.
• [ ] Optional: Tapping the segmented control in the title should swipe views in from the left or right.
• [ ] Optional: Shake to undo.

Notes:

Did not get through the Optionals for this one. :( Was struggling a lot with understanding translation and velocity -- understanding that I was actually calling coordinates from top-right hand corner of the image...and not the center. As I had intially thought.

Walkthrough of all user stories:

GIF created with LiceCap.