Image manipulation using view transitions and transforms

Image Manipulation

I recently took on a code challenge that was delivered in an interesting fashion.   I was given a video that showed the manipulation of two images and was asked to create an iOS app that had the same behavior as the video.

ImageTransform

 

Requirements

After watching the video (many times), I extracted the following requirements for my app:

  • Start out with first image zoomed into the upper right quadrant.
  • Zoom out on first image until it is fully visible.
  • Flip the image on its Y axis.
  • Halfway through the flip (only edge visible), swap in the second image.
  • Once the second image is fully visible, zoom into the upper left quadrant of image.

First Pass

Anxious to complete the code challenge quickly, I made a first pass at the challenge and met the requirements.

I used a container UIView (for placement within the top view) with a UIScrollView inside.  A UIImageView was placed inside the UIScrollView.    I controlled the frame size of the UIImageView to achieve a zoom effect.

I nested a combination of animateWithDuration (changing frame size) and transitionWithView (to cause the flip) to achieve my manipulations.  Halfway through the flip I had used an NSTimer to schedule a swap of the images.

Final pass

I obtained feedback from the code challenge and was asked to make some improvements.  I was also given a bonus challenge which I readily accepted – cause the images to rotate while zooming.

I got rid of the UIScrollView as well as the NSTimer as neither were needed.

Using frames to achieve a zoom effect was not the cleanest approach, so instead I set the transform property of the UIImageView.   To aid in this I created a method that would let me provide a scale factor and x/y positioning of the new center of the image.   I expressed the x/y position as a fraction between 0 and 1.

To achieve the rotation effect, I used the UIView method animateKeyframesWithDuration.   Since I was performing a 360 degree rotation, the only tricky part was to be sure to use at least 3 key frames so that the direction of rotation was unambiguous.    I used an evenly paced animation to keep things simple.

Bonus

I decided to challenge myself further by doing some bonus work.

I created an extension for the Photo app that allows one to select multiple images and create the same manipulations as in the main code challenge.

When creating the extension (new target in project), I took the opportunity to clean up my final pass app code even further by breaking apart the view transition nesting which had gotten a little too deep.  This also allowed me to easily call the methods performing the manipulations multiple times.

GitHub Project

The resulting project (including extension) can be found at:

https://github.com/scottcarter/ImageTransform

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s