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
570
High Performance iOS Apps Testing and Release
qcl
0
110
Mobile App Continuous Delivery
qcl
0
120
How QCLean Works: Introduction to Browser Extensions
qcl
0
660
黑暗時代網頁程式設計 - HTML
qcl
0
120
Big Data Processing lol
qcl
1
130
油電雙掌
qcl
0
850
Other Decks in Programming
See All in Programming
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
tool ディレクティブを導入してみた感想
sgash708
1
160
AWS発のAIエディタKiroを使ってみた
iriikeita
1
140
Namespace and Its Future
tagomoris
6
690
兎に角、コードレビュー
mitohato14
0
170
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
240
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
0
250
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
14
5.9k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1.1k
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
ソフトウェアテスト徹底指南書の紹介
goyoki
1
130
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Scaling GitHub
holman
463
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Visualization
eitanlees
147
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
55
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How STYLIGHT went responsive
nonsquared
100
5.8k
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.