UIViewPropertyAnimator and Easing

Transcript

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