UIViewPropertyAnimator and Easing

UIViewPropertyAnimator and Easing

61a68b2172503ecdf7a7f7757df56071?s=128

Tachibana Kaoru

January 28, 2019
Tweet

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