Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
UIViewPropertyAnimator and Easing
Tachibana Kaoru
January 28, 2019
Technology
2
690
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
150
Custom Group Activities
toyship
3
880
Synchronized iPhones, Again!
toyship
2
1k
ARKit4.pdf
toyship
1
1.7k
Custom Gesture Recognizer on iOS
toyship
3
940
HEVC Video with Alpha Channel
toyship
1
750
RealityKit & Reality Composer
toyship
3
330
ARKit3
toyship
5
6.5k
Synchronized iPhones!
toyship
3
3.7k
Other Decks in Technology
See All in Technology
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.1k
Pentesting Password Reset Functionality
anugrahsr
0
370
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
150
あつめたデータをどう扱うか
skrb
1
110
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
180
400種類のWeb APIをサポートしているデータパイプラインツールにおけるWeb APIとの共存戦略
cdataj
0
160
もし本番ネットワークをまるごと仮想環境に”コピー”できたらうれしいですか? / janog51
corestate55
0
340
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
140
20230121_BuriKaigi
oyakata2438
0
170
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
220
OpenShiftでスポットVMを使おう.pdf
jpishikawa
1
220
20230123_FinJAWS
takuyay0ne
0
110
Featured
See All Featured
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Writing Fast Ruby
sferik
613
58k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.8k
Clear Off the Table
cherdarchuk
79
290k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
Statistics for Hackers
jakevdp
785
210k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
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