iOS Core Animation Transform

Introduction to iOS Core Animation Transform

Transcript

1. Transforms @qcl 2015.02.12
3. Transform • Affine Transforms ◦ CGAffineTransform ◦ view.layer.affineTransform • 3D Transforms ◦ CATransform3D ◦ view.layer.transfrom ◦ view.layer.sublayerTransform
4. Affine Transforms • Math behind the matrix ◦ https://developer.apple. com/library/mac/documentation/GraphicsImaging/Co nceptual/drawingwithquartz2d/dq_affine/dq_affine. html#//apple_ref/doc/uid/TP30001066-CH204-
5. Affine Transforms • Rotation ◦ CGAffineTransformMakeRotation(CGFloat angle) • Scale ◦ CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) • Translation ◦ CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
6. Combining Transforms • CGAffineTransformIdentity ◦ A 3x3 Identity matrix • Rotation ◦ CGAffineTransformRotate(CGAffineTransform t, CGFloat angle) • Scale ◦ CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy) • Translation ◦ CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty) • The order you apply transforms is important! ◦ 矩陣乘法沒有交換律
7. Customized Affine Transform • You can set the fileds of a CGAffineTransform directly. ◦ a ◦ b ◦ c ◦ d ◦ t x ◦ t y
8. 3D Transforms
9. 3D Transforms • Left hand coordinate system
10. 3D Transforms • Rotation ◦ CATransform3DMakeRotatation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z) • Scale ◦ CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz) • Translation ◦ CATransform3DMakeTranslation(CGFloat tx, CGFloat ty, CGFloat tz)
11. 3D Transforms Combination • CATransform3DIdentity ◦ A 4x4 identity matrix • Rotation ◦ CATransform3DRotate(CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z) • Scale ◦ CATransform3DScale(CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz) • Translation ◦ CATransform3DTranslate(CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz)
12. Perspective Projection • Prespective transform sometimes called Z transform
13. Perspective Projection • m34 of CATransform3D • -1 / d • More: ◦ http://en.wikipedia. org/wiki/3D_projection#Perspective_projection
14. Vanishing Point • anchorPoint
15. sublayerTransform • Apply to sublayer but not affect itself. • The vanishing point is the anchorPoint of itself, not sublayer’s anchorPoint
16. Backfaces • view.layer.doubleSided
17. Layer Flattening • Expected result is wrong. • The layers don’t exist in the same 3D space. • The 3D sence in each layer is flattened.