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
160
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
890
Mobile App Continuous Delivery
qcl
0
160
XingZhe - iOS BDD UI Automation Test Framework
qcl
0
360
High Performance iOS Apps Testing and Release
qcl
0
70
Mobile App Continuous Delivery
qcl
0
82
How QCLean Works: Introduction to Browser Extensions
qcl
0
570
黑暗時代網頁程式設計 - HTML
qcl
0
73
Big Data Processing lol
qcl
1
89
油電雙掌
qcl
0
690
Other Decks in Programming
See All in Programming
Rethinking UI building strategies @ SFI 2024
letelete
0
270
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
920
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.4k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Apache Hive 4 on Treasure Data
ryukobayashi
0
310
Hanami and htmx
bkuhlmann
0
210
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Git: the NoSQL Database
bkeepers
PRO
422
63k
In The Pink: A Labor of Love
frogandcode
138
21k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building an army of robots
kneath
300
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Faster Mobile Websites
deanohume
299
30k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Typedesign – Prime Four
hannesfritz
36
2.1k
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.