Skip to content
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. Wh…
Objective-C
Find file
Latest commit 462bf7e Nov 13, 2013 Mark Pospesel Add MIT License to the project
Failed to load latest commit information.
EnterTheMatrix.xcodeproj Add MIT License to the project Nov 13, 2013
EnterTheMatrix Move properties and methods from header into private class extension Dec 1, 2012
.gitignore Add MIT License to the project Nov 13, 2013
Glyphish license.txt Switch info icon to mini version. Add Glyphish license. May 20, 2012
Icon-72.png
Icon-72@2x.png Initial commit Mar 15, 2012
Icon-Small-50.png Initial commit Mar 15, 2012
Icon-Small-50@2x.png Initial commit Mar 15, 2012
LICENSE.TXT Add MIT License to the project Nov 13, 2013
README.md Add MIT License to the project Nov 13, 2013
iTunesArtwork Initial commit Mar 15, 2012

README.md

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

Something went wrong with that request. Please try again.