[翻译] EnterTheMatrix

Enter The Matrix

https://github.com/mpospese/EnterTheMatrix

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.

这是个示例的demo,用来展示我的访谈节目中的"Enter The Matrix"关于矩阵变换的内容.

这是个iPad的demo,使用了Storyboard,ARC,所以需要iOS5.0以上版本.动画中所用到的技术在iOS4中全部都能展示(我没有调用任何iOS5独有的API).这份代码需要转换成non-ARC,进入应用后由7个tab,每个tab代表一个种类的动画.

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.

包含了一个UIView的子类重写了drawRect:方法.画一条直线以及竖线.一个贝塞尔曲线对象用来划分CGContextTranslateCTM不同种类的线,slider控制着变换的数量,缩放,旋转等.

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).

包含了一个UIImageView的各种手势,用来移动拖拽旋转等.

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.

与前一个内容相似(他们继承自同一个类),但是是用的CATransform3D来替换CGAffineTransform.现在可以进行Z轴维度的变换了.

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.

描述了一个基本动画,使一个bar按照顺时针沿着屏幕的四个角移动.switch控制器允许你既可以让frame进行动画也可以让frame变形以及停止所有的动画.

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).

描述了关键帧动画,旋转180度.switch控制器允许你执行基本动画类型以及关键帧动画.

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.

描述了一个折叠的动画效果.其中一张图片被分割成了3个部分,看起来像3个cell(其实不是),点击屏幕的任何地方都会触发折叠效果,再点击又会折叠回来.

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).

描述了一个折纸效果的动画.包含了一张图片在水平或者垂直方向的4个边.在图片边上点击能触发效果.