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
940
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
290
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.3k
HEVC Video with Alpha Channel
toyship
1
1.1k
RealityKit & Reality Composer
toyship
3
490
ARKit3
toyship
4
7k
Synchronized iPhones!
toyship
3
4.5k
Other Decks in Technology
See All in Technology
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
210
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
140
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
160
The Role of Developer Relations in AI Product Success.
giftojabu1
0
160
Chasing the White Whale of Open Source - ROI
mrbobbytables
0
120
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
210
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
4
330
Taming you application's environments
salaboy
0
210
Mastering Quickfix
daisuzu
1
360
Application Development WG Intro at AppDeveloperCon
salaboy
0
210
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
620
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Visualization
eitanlees
145
15k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Gamification - CAS2011
davidbonilla
80
5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing Experiences People Love
moore
138
23k
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