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. About Me • @TachibanaKaoru • Freelance iOS Engineer • iOSDC

    Core Staff • ϘϧμϦϯά޷͖ • ཱྀΛ͠ͳ͕Β࢓ࣄΛ͢Δ • όϦౡɺαϯτϦʔχౡɺόϯίΫɺϑΟϯϥ ϯυɺϊϧ΢ΣʔɺόϧηϩφɺΞΠεϥϯυ
  2. 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 })
  3. Animation with UIViewPropertyAnimator • UIViewPropertyAnimator let easeInOutAnimator = UIViewPropertyAnimator( duration:

    1.0, curve: UIView.AnimationCurve.easeInOut, animations: { self.pinkView.center.y += 300 }) easeInOutAnimator.startAnimation()
  4. 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: { })
  5. What is control points? • ϕδΣۂઢ • ੍ޚ఺͕̎఺ -> 3࣍ϕδΣۂઢ

    • https://nixeneko.hatenablog.com/entry/2015/06/26/075022 Control point 1 Control point 2 Start point End point
  6. 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: { }) ύϥϝʔλʔௐ੔͕ΊΜͲ͍͘͞……ɻ
  7. 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)
  8. How to determine control points? • ٻΊ͍ͨۂઢ͔ΒɺͲ͏΍ͬͯAnimation CurveΛ࡞੒͢Δ͔ʁ • ෺ମͷॳ଎౓ͱՃ଎౓͔ΒAnimation

    CurveΛ࡞੒͍ͨ͠ɻʢఆՃ଎౓ӡ ಈͳͲʣ • ݱঢ়ͷAnimatoin CurveͰ͸೉͍͠ɻ • ͦ΋ͦ΋UIViewͷAnimation Curve͸ࡉ͔͍஄ಓܭࢉ༻Ͱ͸ͳ͍ͷͰɺσ ϑΥϧτͷ property set Λ͍ͭ͘΋͍࣋ͬͯͨํ͕͍͍͔΋ɻ
  9. UIViewPropertyAnimator for Easing • Default animation curveΛ Extensionʹ ͓͖ͯ͠·ͨ͠ɻ •

    https://github.com/TachibanaKaoru / UIViewPropertyAnimatorEasing