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
540
High Performance iOS Apps Testing and Release
qcl
0
100
Mobile App Continuous Delivery
qcl
0
110
How QCLean Works: Introduction to Browser Extensions
qcl
0
650
黑暗時代網頁程式設計 - HTML
qcl
0
110
Big Data Processing lol
qcl
1
120
油電雙掌
qcl
0
830
Other Decks in Programming
See All in Programming
個人開発の学生アプリが企業譲渡されるまで
akidon0000
0
1.1k
The Implementations of Advanced LR Parser Algorithm
junk0612
1
780
SwiftUI API Design Lessons
niw
1
300
エンジニアが挑む、限界までの越境
nealle
1
290
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
170
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
560
Exit 8 for SwiftUI
ojun9
0
140
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
120
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
130
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
180
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Code Review Best Practice
trishagee
67
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Experiences People Love
moore
142
24k
Bash Introduction
62gerente
611
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
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.