Tweet
Tweet

Slide 1

Slide 1 text

UIViewPropertyAnimator and Easing 1PUBUPUJQT !5BDIJCBOB,BPSV

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Animation with UIViewPropertyAnimator • UIViewPropertyAnimator let easeInOutAnimator = UIViewPropertyAnimator( duration: 1.0, curve: UIView.AnimationCurve.easeInOut, animations: { self.pinkView.center.y += 300 }) easeInOutAnimator.startAnimation()

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Animation Curve and easing • EaseInOut EaseOut EaseIn position time

Slide 8

Slide 8 text

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: { })

Slide 9

Slide 9 text

What is control points? • ϕδΣۂઢ • ੍ޚ఺͕̎఺ -> 3࣍ϕδΣۂઢ • https://nixeneko.hatenablog.com/entry/2015/06/26/075022 Control point 1 Control point 2 Start point End point

Slide 10

Slide 10 text

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: { }) ύϥϝʔλʔௐ੔͕ΊΜͲ͍͘͞……ɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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