Sharing Interaction in Quartz Composer
I was experimenting with ways of revealing social sharing options on the iPhone while playing in Quartz Composer (Origami). In this example app (not a real app) there is a group of images that show which of your friends have listened to this song as well. The share icon is on the right of it.
- I created a behavior that when the sharing options are expanded, the profile photos of friends would collapse to de-clutter the space.
- I wanted the share icon to transform into a close button. It was really important to make sure the close button replaced where the share button was so the user would not have to move his or her finger/thumb anywhere to dismiss it.
How I Did It
The animation itself is quite simple. My intention was to have the social icons seem like it exploded out of the share button.
- Alpha is set at 0.0 and turns to 1.0.
- Scale is at 0.8 and turns to 1.0
- Each icon is given its own unique z-rotation to give it the impression that they are moving independently from one another (as they are).
- I used a Bouncy Animation to give the animation a bit of friction and tension.