UIViewPropertyAnimator and Easing

Transcript

1. UIViewPropertyAnimator and Easing
   1PUBUPUJQT
   !5BDIJCBOB,BPSV
   

   View Slide

2. About Me
   • @TachibanaKaoru
   • Freelance iOS Engineer
   • iOSDC Core Staff
   • ϘϧμϦϯά޷͖
   • ཱྀΛ͠ͳ͕Β࢓ࣄΛ͢Δ
   • όϦౡɺαϯτϦʔχౡɺόϯίΫɺϑΟϯϥ
   ϯυɺϊϧ΢ΣʔɺόϧηϩφɺΞΠεϥϯυ
   

   View Slide

3. UIViewPropertyAnimator
   • From iOS 10.0
   • UIViewΛॊೈʹΞχϝʔγϣϯͰ͖Δ
   • Animation start / stop
   • Custom animation curve
   

   View Slide

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
   })
   

   View Slide

5. Animation with UIViewPropertyAnimator
   • UIViewPropertyAnimator
   let easeInOutAnimator = UIViewPropertyAnimator(
   duration: 1.0,
   curve: UIView.AnimationCurve.easeInOut,
   animations: {
   self.pinkView.center.y += 300
   })
   easeInOutAnimator.startAnimation()
   

   View Slide

6. Animation Curve and easing
   • UIView.AnimationCurve
   Linear
   EaseIn
   EaseOut
   EaseInOut
   

   View Slide

7. Animation Curve and easing
   • EaseInOut
   EaseOut
   EaseIn
   position
   time
   

   View Slide

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: {
   })
   

   View Slide

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
   

   View Slide

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: {
    })
    ύϥϝʔλʔௐ੔͕ΊΜͲ͍͘͞……ɻ
    

    View Slide

11. Default Animation Curve
    let parameterEaseInOut
    = UICubicTimingParameters(animationCurve:UIView.AnimationCurve.easeInOut)
    let parameterEaseInOutPoint1 = parameterEaseInOut.controlPoint1
    let parameterEaseInOutPoint2 = parameterEaseInOut.controlPoint2
    

    View Slide

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)
    

    View Slide

13. How to determine control points?
    • ٻΊ͍ͨۂઢ͔ΒɺͲ͏΍ͬͯAnimation CurveΛ࡞੒͢Δ͔ʁ
    • ෺ମͷॳ଎౓ͱՃ଎౓͔ΒAnimation CurveΛ࡞੒͍ͨ͠ɻʢఆՃ଎౓ӡ
    ಈͳͲʣ
    • ݱঢ়ͷAnimatoin CurveͰ͸೉͍͠ɻ
    • ͦ΋ͦ΋UIViewͷAnimation Curve͸ࡉ͔͍஄ಓܭࢉ༻Ͱ͸ͳ͍ͷͰɺσ
    ϑΥϧτͷ property set Λ͍ͭ͘΋͍࣋ͬͯͨํ͕͍͍͔΋ɻ
    

    View Slide

14. jQuery easing
    • https://easings.net/
    • jQuery easing sample
    

    View Slide

15. UIViewPropertyAnimator for Easing
    • Default animation curveΛ Extensionʹ
    ͓͖ͯ͠·ͨ͠ɻ
    • https://github.com/TachibanaKaoru /
    UIViewPropertyAnimatorEasing
    

    View Slide