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
120
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
860
Other Decks in Programming
See All in Programming
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
開発生産性を上げるための生成AI活用術
starfish719
1
170
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
590
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Le côté obscur des IA génératives
pascallemerrer
0
120
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
CSC509 Lecture 02
javiergs
PRO
0
410
プログラマのための作曲入門
cheebow
0
540
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
A Modern Web Designer's Workflow
chriscoyier
697
190k
How STYLIGHT went responsive
nonsquared
100
5.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Music & Morning Musume
bryan
46
6.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Embracing the Ebb and Flow
colly
88
4.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Designing for humans not robots
tammielis
254
25k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.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.