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
210
XingZhe - iOS BDD UI Automation Test Framework
qcl
0
580
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
140
油電雙掌
qcl
0
850
Other Decks in Programming
See All in Programming
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
1.5k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
130
アセットのコンパイルについて
ojun9
0
130
概念モデル→論理モデルで気をつけていること
sunnyone
2
230
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Kiroで始めるAI-DLC
kaonash
2
590
Cache Me If You Can
ryunen344
2
1.4k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
BBQ
matthewcrist
89
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Faster Mobile Websites
deanohume
309
31k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Six Lessons from altMBA
skipperchong
28
4k
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.