matan23 / enterthematrix

The sample application to accompany my conference talk "Enter The Matrix" on matrix transformations. Abstract: Matrix transformations can make your user interfaces come to life: translate, scale, and rotate. Each on its own is relatively simple and straightforward. Yet many developers are daunted when 2 or more operations need to be combined. What if you need to rotate or zoom about an off-center (or even off-screen) point? How do you combine multiple transformations into a single animation? Learn everything you need to know to get started with complex matrix transformations in CoreGraphics and CoreAnimation.

#Enter The Matrix The sample application to accompany my conference talk "Enter The Matrix" on matrix transformations.

Slides can be downloaded from here.

It's an iPad app using Storyboards and ARC (strictly for ease of development), so it requires iOS 5.0. The animation techniques used within should all work in iOS 4 (I don't recall using any iOS 5 specific API's), but the code would need to be converted for non-ARC use. The app is tab-based with 7 tabs. Each tab represents one of the demos during the talk.

##Quartz 2D Drawing Contains a UIView subclass that overrides drawRect: to draw a grid of horizontal and vertical lines. A single UIBezierPath object is used to stroke each type of line with CGContextTranslateCTM (also Scale and Rotate) called to transform the CTM for each time the path is stroked. Sliders control the amount of translation, scaling, and rotation between each stroke.

##CGAffineTransform Contains a UIImageView that can be transformed as desired. Pan, pinch, and rotate gestures can be used to translate, scale, and rotate the view. Or a popover can be used to explicitly set values and change the order of operations (by dragging the table view cells to reorder them).

##CATransform3D Very similar to the previous tab (they share the same super class), but using CATransform3D instead of CGAffineTransform. The translation, scaling, and rotating can now be done in the Z-dimension as well (and you can specify any vector to rotate about using the popover). A semi-transparent background was added so that you can see when the view is below it in the Z-dimension.

##Basic Animation Demonstrates a simple animation to make a bar move clockwise around the 4 edges of the screen. Switches allow you to animate either frame or transform, and to disable any component of the transform animation.

##Keyframe Animation Demonstrates a keyframe animation. An arc rotates through -90, 0, and 90 degrees. Switches allow you to execute either a basic animation (specifying only the end transform, which doesn't behave in the desired fashion) or a keyframe animation (specifying the transform at intermediate points throughout the animation, thus achieving the desired effect).

##Fold Animation Demonstrates a folding animation similar to that used in the Clear to-do list app. Contains an image divided into 3 portions as if it were 3 table view cells (they are not). Pinching anywhere on the screen collapses the middle cell using a fold effect. Pinching out expands it again.

##Flip Animation Demonstrates a page-flipping animation similar to that used in the FlipBoard app. Contains an image that can be flipped either vertically or horizontally and from all 4 sides. It responds to taps or panning near the edge (left/right takes precedent over top/bottom) and swipes anywhere. In a production control, you'd want to choose either vertical or horizontal so that there's no confusion of desired direction when touching near the corners (or else check initial vector of pan if tap start location is ambiguous).

#License Source code is under the MIT License
Artwork is under Glyphish's separate license

Backgrounds and Icons by Glyphish