iOS 10 時代のアニメーション / Introduction to UIViewPropertyAnimator

by Jiro Nagashima

Slide 1

Slide 1 text

iOS 10 ࣌୅ͷΞχϝʔγϣϯ ʙUIViewPropertyAnimatorͷ঺հʙ Jiro Nagashima @hedjirog

Slide 2

Slide 2 text

Advances in UIKit Animations and Transitions Session 216

Slide 3

Slide 3 text

www.wantedly.com/users/3153

Slide 4

Slide 4 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 5

Slide 5 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 6

Slide 6 text

جຊతͳ࢖͍ํ https://developer.apple.com/videos/play/wwdc2016/216/

Slide 7

Slide 7 text

• 2ඵؒͰ xํ޲ 0 → 800 ʹҠಈ • ঃʑʹ଎͘ͳΔ (ease-in) جຊతͳ࢖͍ํ

Slide 8

Slide 8 text

let timing = UICubicTimingParameters(animationCurve: .easeIn) let animator = UIViewPropertyAnimator(duration: 2.0, timingParameters: timing) animator.addAnimations { circle.center.x = 800.0 } animator.startAnimation() جຊతͳ࢖͍ํ

Slide 9

Slide 9 text

https://developer.apple.com/videos/play/wwdc2016/216/

Slide 10

Slide 10 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 11

Slide 11 text

animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation() https://developer.apple.com/videos/play/wwdc2016/216/

Slide 12

Slide 12 text

animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation()

Slide 13

Slide 13 text

animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation()

Slide 14

Slide 14 text

animator.pauseAnimation() animator.fractionComplete = 0.5 animator.startAnimation() • Ξχϝʔγϣϯͷਐḿͷ౓߹͍ΛมߋՄೳ • λΠϛϯάؔ਺ʹैͬͯಈ࡞Λ࠶։Մೳ ਐḿ౓߹͍ͷมߋ

Slide 15

Slide 15 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 16

Slide 16 text

ํ๏1ɿ ɹҰ࣌ఀࢭ͔ͯ͠Βٯํ޲ʹಈ͔͢ ٯํ޲ʹಈ͔͢ animator.pauseAnimation() animator.isReversed = true animator.startAnimation()

Slide 17

Slide 17 text

ํ๏2ɿ ɹಈ࡞ͤͨ͞··ٯํ޲ʹಈ͔͢ ٯํ޲ʹಈ͔͢ animator.isReversed = true

Slide 18

Slide 18 text

ํ๏3ɿ ɹٯํ޲ʹಈ͘ΞχϝʔγϣϯΛ௥Ճ͢Δ ٯํ޲ʹಈ͔͢ animator.addAnimations { circle.center.x = 0.0 }

Slide 19

Slide 19 text

ํ๏3ɿ ɹٯํ޲ʹಈ͘ΞχϝʔγϣϯΛ௥Ճ͢Δ ɹ※ ͜ͷࡍɺՃࢉॲཧʹΑͬͯ׈Β͔ʹΞχϝʔγϣϯ͢Δ ٯํ޲ʹಈ͔͢ https://developer.apple.com/videos/play/wwdc2014/236/

Slide 20

Slide 20 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

UICubicTimingParameters() UICubicTimingParameters(animationCurve: .easeIn) UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0), controlPoint2: CGPoint(x:1.0,y:0.0)) ΠʔδϯάͷΧελϚΠζ

Slide 24

Slide 24 text

UICubicTimingParameters() UICubicTimingParameters(animationCurve: .linear) UICubicTimingParameters(controlPoint1: CGPoint(x:0.0, y:1.0), controlPoint2: CGPoint(x:1.0,y:0.0)) ΠʔδϯάͷΧελϚΠζ https://developer.apple.com/reference/uikit/uicubictimingparameters

Slide 25

Slide 25 text

UIViewPropertyAnimator • جຊతͳ࢖͍ํ • ਐḿ౓߹͍ͷมߋ • ٯํ޲΁ಈ͔͢ • ΠʔδϯάͷΧελϚΠζ

Slide 26

Slide 26 text

ײͨ͜͡ͱ • ΠϯλϥΫςΟϒͳૢ࡞ͱ૬ੑ͕ྑ͍ • ࣗ༝ʹಈ࡞Λதஅ͢Δ͜ͱ͕Մೳ • ࣗવͳಈ࡞ͷ࠶։͕Մೳ • ঢ়ଶͷ؅ཧɾૢ࡞͕ϥΫʹ • ΠʔδϯάΛΑΓॊೈʹఆٛՄೳʹ

Slide 27

Slide 27 text

UIViewPropertyAnimator iOS 10+