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