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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide