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
UIViewPropertyAnimator and Easing
Search
Tachibana Kaoru
January 28, 2019
Technology
2
1.1k
UIViewPropertyAnimator and Easing
Tachibana Kaoru
January 28, 2019
Tweet
Share
More Decks by Tachibana Kaoru
See All by Tachibana Kaoru
GeoLocationAnchor and MKTileOverlay
toyship
0
340
Custom Group Activities
toyship
3
1.4k
Synchronized iPhones, Again!
toyship
2
1.5k
ARKit4.pdf
toyship
1
2.2k
Custom Gesture Recognizer on iOS
toyship
3
1.4k
HEVC Video with Alpha Channel
toyship
1
1.2k
RealityKit & Reality Composer
toyship
3
620
ARKit3
toyship
4
7.3k
Synchronized iPhones!
toyship
3
4.8k
Other Decks in Technology
See All in Technology
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
1.1k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
500
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
190
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
610
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
270
フレームワークを意識させないワークショップづくり
keigosuda
0
140
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Designing for Performance
lara
610
69k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Visualization
eitanlees
149
16k
BBQ
matthewcrist
89
9.8k
Embracing the Ebb and Flow
colly
88
4.8k
Transcript
UIViewPropertyAnimator and Easing 1PUBUPUJQT !5BDIJCBOB,BPSV
About Me • @TachibanaKaoru • Freelance iOS Engineer • iOSDC
Core Staff • ϘϧμϦϯά͖ • ཱྀΛ͠ͳ͕ΒࣄΛ͢Δ • όϦౡɺαϯτϦʔχౡɺόϯίΫɺϑΟϯϥ ϯυɺϊϧΣʔɺόϧηϩφɺΞΠεϥϯυ
UIViewPropertyAnimator • From iOS 10.0 • UIViewΛॊೈʹΞχϝʔγϣϯͰ͖Δ • Animation start
/ stop • Custom animation curve
Animation with UIViewPropertyAnimator • Old UIView Animation • UIView.animate(withDuration: 1.0,
delay: 0.0, options: UIView.AnimationOptions.curveEaseInOut, animations: { self.pinkView.center.y += 300 }, completion: {finished in })
Animation with UIViewPropertyAnimator • UIViewPropertyAnimator let easeInOutAnimator = UIViewPropertyAnimator( duration:
1.0, curve: UIView.AnimationCurve.easeInOut, animations: { self.pinkView.center.y += 300 }) easeInOutAnimator.startAnimation()
Animation Curve and easing • UIView.AnimationCurve Linear EaseIn EaseOut EaseInOut
Animation Curve and easing • EaseInOut EaseOut EaseIn position time
Custom Animation with UIViewPropertyAnimator • Customize with controlPoint • let
customAnimation = UIViewPropertyAnimator( duration: 2.0, controlPoint1: CGPoint(x: 0.41999998688697815, y: 0.0), controlPoint2: CGPoint(x: 0.5799999833106995, y: 1.0), animations: { })
What is control points? • ϕδΣۂઢ • ੍ޚ͕̎ -> 3࣍ϕδΣۂઢ
• https://nixeneko.hatenablog.com/entry/2015/06/26/075022 Control point 1 Control point 2 Start point End point
Custom Animation with UIViewPropertyAnimator • Customize with controlPoint • let
customAnimation = UIViewPropertyAnimator( duration: 2.0, controlPoint1: CGPoint(x: 0.41999998688697815, y: 0.0), controlPoint2: CGPoint(x: 0.5799999833106995, y: 1.0), animations: { }) ύϥϝʔλʔௐ͕ΊΜͲ͍͘͞……ɻ
Default Animation Curve let parameterEaseInOut = UICubicTimingParameters(animationCurve:UIView.AnimationCurve.easeInOut) let parameterEaseInOutPoint1 =
parameterEaseInOut.controlPoint1 let parameterEaseInOutPoint2 = parameterEaseInOut.controlPoint2
Default Animation Curve // UIView.AnimationCurve.easeInOut //point1:(0.41999998688697815, 0.0) //point2:(0.5799999833106995, 1.0) //
UIView.AnimationCurve.easeIn //point1:(0.41999998688697815, 0.0) //point2:(1.0, 1.0) // UIView.AnimationCurve.easeOut //point1:(0.0, 0.0) //point2:(0.5799999833106995, 1.0) // UIView.AnimationCurve.linear //point1:(0.0, 0.0) //point2:(1.0, 1.0)
How to determine control points? • ٻΊ͍ͨۂઢ͔ΒɺͲ͏ͬͯAnimation CurveΛ࡞͢Δ͔ʁ • ମͷॳͱՃ͔ΒAnimation
CurveΛ࡞͍ͨ͠ɻʢఆՃӡ ಈͳͲʣ • ݱঢ়ͷAnimatoin CurveͰ͍͠ɻ • ͦͦUIViewͷAnimation Curveࡉ͔͍ಓܭࢉ༻Ͱͳ͍ͷͰɺσ ϑΥϧτͷ property set Λ͍͍ͭ࣋ͬͯͨ͘ํ͕͍͍͔ɻ
jQuery easing • https://easings.net/ • jQuery easing sample
UIViewPropertyAnimator for Easing • Default animation curveΛ Extensionʹ ͓͖ͯ͠·ͨ͠ɻ •
https://github.com/TachibanaKaoru / UIViewPropertyAnimatorEasing