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
Tranformations - Core Animation
Search
Jasdev Singh
March 22, 2016
Technology
0
80
Tranformations - Core Animation
Chapter review from Nick Lockwood's Core Animation book at Tumblr's iOS Book Club
Jasdev Singh
March 22, 2016
Tweet
Share
More Decks by Jasdev Singh
See All by Jasdev Singh
Tuning for Speed
jasdev
0
64
Hidden Gems in Swift
jasdev
6
1.3k
Swift 2.2 & 3.0 Changes
jasdev
1
660
Profiling
jasdev
0
59
Accessing Data
jasdev
0
66
Lessons in Building APIs
jasdev
0
92
UVA ACM Interview Tips
jasdev
0
91
Other Decks in Technology
See All in Technology
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
530
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
120
The Future of SEO: The Impact of AI on Search
badams
0
200
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
990
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
680
2.5Dモデルのすべて
yu4u
2
870
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
320
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
370
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
110
Larkご案内資料
customercloud
PRO
0
650
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
100
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
98
5.4k
How to Ace a Technical Interview
jacobian
276
23k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
KATA
mclloyd
29
14k
Unsuck your backbone
ammeep
669
57k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Speed Design
sergeychernyshev
27
790
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
Transcript
TRANSFORMATIONS IOS BOOK CLUB JASDEV SINGH
AFFINE TRANSFORMATIONS > Rotation > CGAffineTransformMakeRotation(_:) > Scaling > CGAffineTransformMakeScale(_:_:)
> Translations > CGAffineTransformMakeTranslation(_:_:)
UIView transform PROPERTY Really just a wrapper on the underlying
CALayer feature, affineTransform.
COMPOSING TRANSFORMATIONS Core Graphics provides functions that take existing transformations
and applies another on top of it. > CGAffineTransformRotate(_:_:) > CGAffineTransformScale(_:_:_:) > CGAffineTransformTranslate(_:_:_:) > CGAffineTransformConcat(_:_:)
SAMPLE TRANSFORMATION > 50% scale > Rotate 30 degrees >
Vertical translation by 200 points public func +(lhs: CGAffineTransform, rhs: CGAffineTransform) -> CGAffineTransform { return CGAffineTransformConcat(lhs, rhs) }
import UIKit class ViewController: UIViewController { let view1 = UIView()
override func viewDidLoad() { super.viewDidLoad() view1.backgroundColor = .greenColor() view1.frame = CGRect(origin: view.center, size: CGSize(width: 150, height: 150)) view.addSubview(view1) let transform = CGAffineTransformIdentity + CGAffineTransformMakeScale(0.5, 0.5) + CGAffineTransformMakeRotation(CGFloat(M_PI) / 180 * 30) + CGAffineTransformMakeTranslation(0, 200) view1.layer.setAffineTransform(transform) } }
None
ARTISANAL TRANSFORMATIONS If you need to to make custom affine
transformations that aren't built into Core Graphics, you can directly set values on the transformation matrix:
3D TRANSFORMS The transform property on CALayer is of type
CATransform3D. > CATransform3DMakeRotation(_:_:_:_:) > CATransform3DMakeScale(_:_:_:) > CATransform3DMakeTranslation(_:_:_:)
Perspective Projections By default, Core Animation uses isometric projections, which
preserves parallel lines in 3D space. To give our 3D transformations a sense of depth, we have to add a perspective transform .
By default, . To apply perspective, set to , where
is the distance between the imaginary camera and the screen, in points. usually works well.
sublayerTransform PROPERTY A CATranmsform3D property on CALayer that allows you
to apply a transform to all sublayers!
doubleSided PROPERTY