Swipe Transition

#potatotips 47

https://github.com/tattn/SwipeTransition

Transcript

1. Swipe Transition
   #potatotips 47
   ాத ୡ໵ (@tattn)
   

   View Slide

2. • Yahoo!৐׵Ҋ಺
   • iOSΞϓϦΤϯδχΞ
   • GitHub: @tattn
   • Qiita: @tattn
   • Twitter: @tanakasan2525
   ాத ୡ໵ (@tattn)
   

   View Slide

3. Α͋͘Δ

   ศརͳεϫΠϓδΣενϟʔ
   Λ࣮૷ͯ͠Έ·ͨ͠
   

   View Slide

4. ͲͷҐஔͰ΋
   εϫΠϓόοΫͰ͖Δ
   

   View Slide

5. 
   ը໘ͷͲ͜Ͱ΋ࠨʹεϫΠϓͰ͖Δ
   ը໘୺(Τοδ)Ͱͳͯ͘΋OK
   

   View Slide

6. 
   Sloppy Swiping ͱ΋ݺ͹Ε͍ͯ·͢ɻ
   ͜ͷεϥΠυͰ͸γϯϓϧʹ

   SwipeBackͱදه͠·͢ɻ
   

   View Slide

7. ԼεϫΠϓͰϞʔμϧΛด͡Δ
   

   View Slide

8. 
   ԼʹεϫΠϓ͢ΔͱϞʔμϧͷը໘͕εϫΠϓͱͱ΋ʹҠಈ͠ɺ

   ͋Δఔ౓εΫϩʔϧ͢Δͱด͡Δ
   

   View Slide

9. 
   ͜ͷεϥΠυͰ͸

   SwipeToDismissͱදه͠·͢ɻ
   

   View Slide

10. 
    ࣮૷ͯ͠Έ·ͨ͠ͷͰɺ

    ͦͷ࣮૷ํ๏Λ͝঺հ͠·͢
    

    View Slide

11. ࣮૷ํ๏
    

    View Slide

12. ࠓճͷओͳొ৔ਓ෺
    
    • UIPanGestureRecognizer
    • UIViewControllerAnimatedTransitioning
    • UIViewControllerTransitioningDelegate
    • UINavigationControllerDelegate
    • UIPercentDrivenInteractiveTransition
    

    View Slide

13. UIPanGestureRecognizer
    ࢦͷҠಈྔͳͲΛऔಘͰ͖ΔΫϥεɻ
    ࠓճ͸͜ΕͰεϫΠϓΛݕग़͠·͢ɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJQBOHFTUVSFSFDPHOJ[FS
    

    View Slide

14. UIViewControllerAnimatedTransitioning
    ࣗ࡞ͷը໘ભҠΛ࣮૷Ͱ͖Δϓϩτίϧɻ
    SwipeBackͰ͸ViewΛӈʹҠಈɺ

    SwipeToDismissͰ͸ViewΛԼʹҠಈ

    ͢ΔͨΊʹ࢖༻͠·͢ɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJWJFXDPOUSPMMFSBOJNBUFEUSBOTJUJPOJOH
    

    View Slide

15. UIViewControllerTransitioningDelegate
    present/dismiss࣌ʹ

    Ͳͷτϥϯδγϣϯ(UIViewControllerAnimatedTransitioning)Λ

    ར༻͢Δͷ͔Λࢦఆ͢Δϓϩτίϧɻ
    

    SwipeToDismissͰࣗ࡞ͷը໘ભҠΛར༻͢ΔͨΊʹ

    ࢖༻͠·͢ɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJWJFXDPOUSPMMFSUSBOTJUJPOJOHEFMFHBUF
    

    View Slide

16. UINavigationControllerDelegate
    UINavigationControllerͰൃੜ͢ΔΠϕϯτͷัଊ΍

    Ͳͷτϥϯδγϣϯ(UIViewControllerAnimatedTransitioning)Λ

    ར༻͢Δͷ͔Λࢦఆ͢Δϓϩτίϧɻ
    

    SwipeBackͰࣗ࡞ͷը໘ભҠΛར༻͢ΔͨΊʹ

    ࢖༻͠·͢ɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJOBWJHBUJPODPOUSPMMFSEFMFHBUF
    

    View Slide

17. UIPercentDrivenInteractiveTransition
    ը໘ભҠͷิؒํ๏ͷࢦఆ΍

    ը໘ભҠ͕Կ%׬͍ྃͯ͠Δͷ͔ͳͲΛ

    ઃఆ͢ΔΫϥεɻ

    

    SwipeBackͱSwipeToDismissͰ

    Ͳ͜·ͰεϫΠϓͨ͠ͷ͔Λදݱ͢ΔͨΊʹ࢖༻͠·͢ɻ
    IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJQFSDFOUESJWFOJOUFSBDUJWFUSBOTJUJPO
    

    View Slide

18. (ൃද࣌ؒͷؔ܎Ͱ)

    SwipeBackͷํΛ঺հ͠·͢ɻ
    (SwipeToDismiss΋΄΅ಉ࣮͡૷Ͱग़དྷ·͢ɻ)
    

    View Slide

19. SwipeBackAnimator
    
    class SwipeBackAnimator: NSObject,
    UIViewControllerAnimatedTransitioning {
    func animateTransition(using transitionContext:
    UIViewControllerContextTransitioning) {
    guard let to = transitionContext.viewController(forKey:
    .to),
    let from = transitionContext.viewController(forKey:
    .from) else { return }
    let containerView = transitionContext.containerView
    containerView.insertSubview(to.view, belowSubview:
    from.view)
    to.view.frame = containerView.frame
    ભҠݩͷviewͷԼʹભҠޙͷviewΛinsert͍ͯ͠·͢ɻ

    SwipeBack࣌ʹԼͷViewΛදࣔ͢ΔͨΊͰ͢ɻ
    

    View Slide

20. 
    ͜ͷ෦෼
    

    View Slide

21. SwipeBackAnimator
    
    // ύϥϥοΫεޮՌ
    to.view.transform.tx = -containerView.bounds.width * 0.3
    UIView.animate(
    withDuration: transitionDuration(using: transitionContext),
    delay: 0,
    options: .curveLinear,
    animations: {
    to.view.transform = .identity
    from.view.transform = CGAffineTransform(translationX: to.view.frame.width,
    y: 0)
    }, completion: { _ in
    from.view.transform = .identity
    transitionContext.completeTransition(
    !transitionContext.transitionWasCancelled
    )
    })
    ભҠޙͷviewʹύϥϥοΫεޮՌΛ෇͚ͭͭɺ

    ભҠલͷviewΛӈ΁Ҡಈ
    

    View Slide

22. SwipeBackNavigationController
    
    class SwipeBackNavigationController: UINavigationController {
    private let animator = SwipeBackAnimator()
    private var interactiveTransition: UIPercentDrivenInteractiveTransition!
    override func viewDidLoad() {
    super.viewDidLoad()
    delegate = self
    let panGesture = UIPanGestureRecognizer()
    panGesture.addTarget(self, action: #selector(handlePanGesture(_:)))
    panGesture.maximumNumberOfTouches = 1
    view.addGestureRecognizer(panGesture)
    }
    viewʹUIPanGestureRecognizerͱ

    UINavigationControllerDelegateΛηοτ
    

    View Slide

23. SwipeBackNavigationController
    
    extension SwipeBackNavigationController: UINavigationControllerDelegate {
    public func navigationController(_ navigationController:
    UINavigationController, animationControllerFor operation:
    UINavigationControllerOperation, from fromVC: UIViewController, to toVC:
    UIViewController) -> UIViewControllerAnimatedTransitioning? {
    return operation == .pop ? animator : nil
    }
    public func navigationController(_ navigationController:
    UINavigationController, interactionControllerFor animationController:
    UIViewControllerAnimatedTransitioning) ->
    UIViewControllerInteractiveTransitioning? {
    return interactiveTransition
    }
    }
    ར༻͢Δࣗ࡞ͷτϥϯδγϣϯΛฦ͢ɻ
    (εϥΠυʹࡌͤΔͱਏ͍ݟͨ໨Ͱ͕͢ɺ࣮૷͍ͯ͠Δͷ͸2ߦͰ͢)
    

    View Slide

24. SwipeBackNavigationController
    
    @objc private func handlePanGesture(_ recognizer: UIPanGestureRecognizer) {
    switch recognizer.state {
    case .began:
    interactiveTransition = UIPercentDrivenInteractiveTransition()
    interactiveTransition.completionCurve = .linear
    popViewController(animated: true)
    case .changed:
    let translation = recognizer.translation(in: view)
    interactiveTransition.update(translation.x / view.bounds.width)
    case .ended:
    if recognizer.velocity(in: view).x > 0 {
    interactiveTransition.finish()
    interactiveTransition = nil
    } else {
    fallthrough
    }
    case .cancelled:
    interactiveTransition.cancel()
    interactiveTransition = nil
    default:
    break
    }
    }
    δΣενϟʔʹ߹Θͤͯঢ়ଶΛߋ৽
    

    View Slide

25. ׬੒
    100ߦຬͨͳ͍ίʔυͰ

    γϯϓϧͳSwipeBackΛ࣮૷Ͱ͖·ͨ͠ɻ
    ࠓճͷ࣮૷͸ˣʹஔ͍ͯ͋Γ·͢ɻ
    https://github.com/tattn/SwipeTransitionExample
    

    View Slide

26. ϥΠϒϥϦԽ
    

    View Slide

27. ͔ͤͬ͘ͳͷͰϥΠϒϥϦԽ͠·ͨ͠
    https://github.com/tattn/SwipeTransition
    ScrollView͕͋ͬͯ΋ಈ࡞͢ΔΑ͏ʹͨ͠Γɺ

    Method SwizzlingͰશը໘ʹద༻͢Δػೳ΋͋Γ·͢ɻ
    SwipeTransition
    ͥͻɺ͓ࢼ͍ͩ͘͠͞ʂ
    

    View Slide

28. ·ͱΊ
    

    View Slide

29. ·ͱΊ
    ʘδΣενϟʔͰૉఢUXΛ໨ࢦͦ͏ʗ

    ʘʘ\\٩( 'ω' )و //ʗʗ
    ఏڙ͞Ε͍ͯΔ࢓૊ΈΛར༻͢Δ͜ͱͰ

    ҙ֎ͱ؆୯ʹ࣮૷͢Δ͜ͱ͕ग़དྷ·ͨ͠
    

    View Slide