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
930
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
280
Custom Group Activities
toyship
3
1.3k
Synchronized iPhones, Again!
toyship
2
1.4k
ARKit4.pdf
toyship
1
2.1k
Custom Gesture Recognizer on iOS
toyship
3
1.2k
HEVC Video with Alpha Channel
toyship
1
1.1k
RealityKit & Reality Composer
toyship
3
470
ARKit3
toyship
4
7k
Synchronized iPhones!
toyship
3
4.5k
Other Decks in Technology
See All in Technology
S3上のログを分析したいだけなのに
mitsuo_sys
0
130
0x5F3759DF
ykozw
0
370
LLMOps : ΔMLOps
shuntaito
13
2.5k
自動テストの信頼性を高めるミューテーションテストの活用に向けて
tarappo
2
110
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
250
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
180
AWS CDKで大量のパラメータストアを作りたい
haku__hime
1
120
インシデント対応の 実践と品質文化の醸成
____rina____
1
200
API開発健全性 〜 持続可能で高品質なAPIのためのアプローチ 〜
nagix
2
140
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
310
最新のAIツールは何を解決しようとしているのか - Python エンジニアが取り組むべき "越境" とは - / Python-Engineer-in-AI-Era
iktakahiro
1
110
強すぎるIAMをCloudTrailを使って適正化した話
yjszk
0
200
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Designing for humans not robots
tammielis
249
25k
Code Reviewing Like a Champion
maltzj
519
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Done Done
chrislema
181
16k
What's in a price? How to price your products and services
michaelherold
243
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.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