Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIViewPropertyAnimator and Easing

UIViewPropertyAnimator and Easing

Tachibana Kaoru

January 28, 2019
Tweet

More Decks by Tachibana Kaoru

Other Decks in Technology

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