Slide 1
Slide 1 text
UIViewPropertyAnimator and Easing
1PUBUPUJQT
!5BDIJCBOB,BPSV
Slide 2
Slide 2 text
About Me
• @TachibanaKaoru
• Freelance iOS Engineer
• iOSDC Core Staff
• ϘϧμϦϯά͖
• ཱྀΛ͠ͳ͕ΒࣄΛ͢Δ
• όϦౡɺαϯτϦʔχౡɺόϯίΫɺϑΟϯϥ
ϯυɺϊϧΣʔɺόϧηϩφɺΞΠεϥϯυ
Slide 3
Slide 3 text
UIViewPropertyAnimator
• From iOS 10.0
• UIViewΛॊೈʹΞχϝʔγϣϯͰ͖Δ
• Animation start / stop
• Custom animation curve
Slide 4
Slide 4 text
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
})
Slide 5
Slide 5 text
Animation with UIViewPropertyAnimator
• UIViewPropertyAnimator
let easeInOutAnimator = UIViewPropertyAnimator(
duration: 1.0,
curve: UIView.AnimationCurve.easeInOut,
animations: {
self.pinkView.center.y += 300
})
easeInOutAnimator.startAnimation()
Slide 6
Slide 6 text
Animation Curve and easing
• UIView.AnimationCurve
Linear
EaseIn
EaseOut
EaseInOut
Slide 7
Slide 7 text
Animation Curve and easing
• EaseInOut
EaseOut
EaseIn
position
time
Slide 8
Slide 8 text
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: {
})
Slide 9
Slide 9 text
What is control points?
• ϕδΣۂઢ
• ੍ޚ͕̎ -> 3࣍ϕδΣۂઢ
• https://nixeneko.hatenablog.com/entry/2015/06/26/075022
Control point 1
Control point 2
Start point End point
Slide 10
Slide 10 text
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: {
})
ύϥϝʔλʔௐ͕ΊΜͲ͍͘͞……ɻ
Slide 11
Slide 11 text
Default Animation Curve
let parameterEaseInOut
= UICubicTimingParameters(animationCurve:UIView.AnimationCurve.easeInOut)
let parameterEaseInOutPoint1 = parameterEaseInOut.controlPoint1
let parameterEaseInOutPoint2 = parameterEaseInOut.controlPoint2
Slide 12
Slide 12 text
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)
Slide 13
Slide 13 text
How to determine control points?
• ٻΊ͍ͨۂઢ͔ΒɺͲ͏ͬͯAnimation CurveΛ࡞͢Δ͔ʁ
• ମͷॳͱՃ͔ΒAnimation CurveΛ࡞͍ͨ͠ɻʢఆՃӡ
ಈͳͲʣ
• ݱঢ়ͷAnimatoin CurveͰ͍͠ɻ
• ͦͦUIViewͷAnimation Curveࡉ͔͍ಓܭࢉ༻Ͱͳ͍ͷͰɺσ
ϑΥϧτͷ property set Λ͍͍ͭ࣋ͬͯͨ͘ํ͕͍͍͔ɻ
Slide 14
Slide 14 text
jQuery easing
• https://easings.net/
• jQuery easing sample
Slide 15
Slide 15 text
UIViewPropertyAnimator for Easing
• Default animation curveΛ Extensionʹ
͓͖ͯ͠·ͨ͠ɻ
• https://github.com/TachibanaKaoru /
UIViewPropertyAnimatorEasing