Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
iOS Core Animation Transform
Search
Qing-Cheng Li
February 12, 2015
Programming
0
180
iOS Core Animation Transform
Introduction to iOS Core Animation Transform
Qing-Cheng Li
February 12, 2015
Tweet
Share
More Decks by Qing-Cheng Li
See All by Qing-Cheng Li
Using Buck to save iOS project build time
qcl
0
1.1k
Mobile App Continuous Delivery
qcl
0
200
XingZhe - iOS BDD UI Automation Test Framework
qcl
0
560
High Performance iOS Apps Testing and Release
qcl
0
110
Mobile App Continuous Delivery
qcl
0
110
How QCLean Works: Introduction to Browser Extensions
qcl
0
660
黑暗時代網頁程式設計 - HTML
qcl
0
120
Big Data Processing lol
qcl
1
130
油電雙掌
qcl
0
840
Other Decks in Programming
See All in Programming
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
390
エラーって何種類あるの?
kajitack
5
340
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
260
GraphRAGの仕組みまるわかり
tosuri13
8
520
NPOでのDevinの活用
codeforeveryone
0
730
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
0
310
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
5つのアンチパターンから学ぶLT設計
narihara
1
150
Featured
See All Featured
Docker and Python
trallard
44
3.5k
Building Applications with DynamoDB
mza
95
6.5k
Speed Design
sergeychernyshev
32
1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Scaling GitHub
holman
459
140k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Making Projects Easy
brettharned
116
6.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
Transforms @qcl 2015.02.12
None
Transform • Affine Transforms ◦ CGAffineTransform ◦ view.layer.affineTransform • 3D
Transforms ◦ CATransform3D ◦ view.layer.transfrom ◦ view.layer.sublayerTransform
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-
Affine Transforms • Rotation ◦ CGAffineTransformMakeRotation(CGFloat angle) • Scale ◦
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) • Translation ◦ CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
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! ◦ 矩陣乘法沒有交換律
Customized Affine Transform • You can set the fileds of
a CGAffineTransform directly. ◦ a ◦ b ◦ c ◦ d ◦ t x ◦ t y
3D Transforms
3D Transforms • Left hand coordinate system
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)
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)
Perspective Projection • Prespective transform sometimes called Z transform
Perspective Projection • m34 of CATransform3D • -1 / d
• More: ◦ http://en.wikipedia. org/wiki/3D_projection#Perspective_projection
Vanishing Point • anchorPoint
sublayerTransform • Apply to sublayer but not affect itself. •
The vanishing point is the anchorPoint of itself, not sublayer’s anchorPoint
Backfaces • view.layer.doubleSided
Layer Flattening • Expected result is wrong. • The layers
don’t exist in the same 3D space. • The 3D sence in each layer is flattened.