もっとFluidでRedirectableなモーダル表示アニメーション

Transcript

1. ΋ͬͱFluidͰ RedirectableͳϞʔμϧ දࣔΞχϝʔγϣϯ @hirobe 2018.9.13
2. ࣗݾ঺հ ޿෦Ұ໻ ( twitter : @hirobe ) גࣜձࣾBunguu iOSΞϓϦɺMacOSΞϓϦͷ։ൃΛ΍ͬͯ·͢ ࠓճͷιʔείʔυ: https://github.com/hirobe/DismissFluidlySample
3. Designing Fluid Interfaces
 (WWDC 2018) • Fluid : ྲྀମͷɺͳΊΒ͔ͳ • ӳޠ೉͔͚ͬͨ͠Ͳɺࠓ͸ࣈນ͋Δ https://developer.apple.com/videos/play/wwdc2018/803/
4. What makes an interface feed fluid? • ͳΊΒ͔ͳΠϯλϑΣʔεͬͯͲΜͳͩΖ͏ʁ • ৮ͬͯͬ͘͠Γ͘Δ΋ͷ
5. A tool feels like an extension of your mind • ৺ ମͷԆ௕ͷΑ͏ʹײ͡ΒΕΔಓ۩ • iPhone͸௚઀खͰૢ࡞͢Δ΋ͷ • ͏·͘ಈ͚͹ਓؒͷExtensionͱͳΕΔ • ৮Δͷָ͕͘͠ͳΔ
6. ಄ͷಇ͖ํʹΞϓϦͷ൓ԠΛ߹ΘͤΔ • ൓Ԡ଎౓͕େࣄ • ࢥߟͷํ޲స׵΍ׂΓࠐΈʹରԠ͠·͠ΐ͏ • 
ۭؒతҰ؏ੑΛอͬͨ഑ஔΛ͠Α͏ • Ϣʔβͷ༧ଌʹԊͬͨදݱΛ͠Α͏ • খ͞ͳλονૢ࡞Ͱେ͖ͳग़ྗΛ͠Α͏ • εΫϩʔϧͷڥքʹό΢ϯυΛ͚ͭΑ͏ • ΞχϝʔγϣϯͷνϥπΩΛ๷ࢭ͠Α͏
7. Redirectable • ࢥߟͷํ޲స׵΍ׂΓࠐΈʹଈԠ͠·͠ΐ͏
 ਓؒ͸ߟ͑ͳ͕Βը໘ૢ࡞͢Δ • δΣενϟதͷδΣενϟΛՄೳʹ͠Α͏
8. δΣενϟதͷδΣενϟ iPhoneX • ϗʔϜʹ໭Γͳ͕Β
 ϗʔϜը໘ΛԣεϫΠϓ
9. δΣενϟதͷδΣενϟ iPhoneX • ΞϓϦΛλοϓͯ͠
 ֦େதʹϗʔϜը໘ʹ໭Δ
10. δΣενϟதͷδΣενϟ iPhoneX • ΞϓϦΛىಈͯ͠
 ֦େதʹΞϓϦΛૢ࡞
11. ΞϓϦͰ࣮૷͍ͨ͠ʂ • Ͳ͜Ͱ࢖͑ΔͩΖ͏͔ʁ • ͦ͏͍͑͹ࢥ͍౰ͨΔ͜ͱ͕
12. ࣸਅΛλοϓ͢Δͱ֦େදࣔ͢ΔΞϓϦ
13. λον͕ແࢹ͞ΕΔ͜ͱ͕͋Δ • ࢠը໘Λดͨ͡ޙʹɺ ผͷը૾Λ։͖͍ͨ • ը૾ͷॖখΞχϝʔγϣ ϯ͕ऴΘΔલʹλοϓ͠ ͪΌͬͯΔʁʁ /P
    3FTQPOTF
14. iPhoneXͷϗʔϜͷ৔߹
15. iPhoneXͷϗʔϜͷ৔߹ • ΞϓϦΛด͍ͯΔؒ΋ɺ
 λονΛͪΌΜͱड͚෇͚ͯ ͘ΕΔ -> Fluid!
16. ը໘Λด͡ΔભҠதʹ ผૢ࡞Λ ड͚෇͚ΔͷΛ ΞϓϦͰ࣮ݱ͢Δͧ
17. UIViewControllerAnimatedTransitioning • containerViewʹద౰ʹviewΛషΓ෇͚ͯ
 ը໘ભҠΞχϝʔγϣϯΛॻ͍͓ͯ͘ Ξχϝʔγϣϯ༻ͷ View containerView ਌ը໘
18. UIViewControllerAnimatedTransitioning • ç func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { if isForPresented { // present presentAnimation(transitionContext) } else { // dissmis dissmisAnimation(transitionContext) } } func dissmisAnimation(_ transitionContext: UIViewControllerContextTransitioning) { let containerView = transitionContext.containerView guard let nav = transitionContext.viewController(forKey: .from) as? UINavigationController, let detailVC:DetailViewController = nav.visibleViewController as? DetailViewController else { fatalError() }
19. UIViewControllerAnimatedTransitioning • ç let fromImageRect = detailVC.detailImageRect(containerView: containerView, safeAreaInsets: from?.view?.safeAreaInsets ?? .zero) let toImageRect = detailVC.parentImageViewRect // imageΛҠಈ͢ΔͨΊͷviewΛ࡞੒ let imageView:UIImageView = UIImageView(frame: fromImageRect) imageView.contentMode = .scaleAspectFill imageView.clipsToBounds = true imageView.image = detailVC.parentImage containerView.addSubview(imageView) // ॖখΞχϝʔγϣϯ nav.view.isHidden = true UIView.animate(withDuration: transitionDuration(using: transitionContext), delay: 0, options: [.curveEaseInOut], animations: { () -> Void in imageView.frame = toImageRect }) { (finished) -> Void in nav.view.removeFromSuperview() transitionContext.completeTransition(true) } }
20. ࢦΛ཭ͨ͠ޙͷΞχϝʔγϣϯ • UIViewControllerTransitionDelegate,
 UIViewControllerAnimatedTransitioningΛ࣮૷ • ։࣌͘ʹtransitionDelegateʹηοτ override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { : let storyboard = UIStoryboard(name: "Main", bundle: nil) guard let vc = storyboard.instantiateViewController(withIdentifier: "DetailViewController") as? DetailViewController else { return } let nav = UINavigationController(rootViewController: vc) nav.isNavigationBarHidden = true nav.modalPresentationStyle = .custom nav.transitioningDelegate = vc.modalTransition self.present(nav, animated: true) }
21. • dismiss(animated: true)ͰΞχϝʔγϣϯΛ։࢝ • λον΍δΣενϟ͕ແࢹ͞ΕΔ εϫΠϓɺϘλϯૢ࡞ ࢦΛ཭ͨ͠:dismiss(animated: true) ด͡ΔΞχϝʔγϣϯ UIViewController AnimatedTransitioning UIViewControllerAnimatedTransitioning
22. UIAnimatedTransitioningΛ࢖Θͳ͍ ->ࢦΛ཭ͨ͠ޙ͸ɺભҠઌ͕Ξχϝʔγϣϯ εϫΠϓɺϘλϯૢ࡞ ࢦΛ཭ͨ͠: dismiss(animated: false) ࢠViewCotroller ด͡ΔΞχϝʔγϣϯ ʢ৮ΕΔʣ ਌ViewCotroller
23. λοϓ͕ແࢹ͞Εͳ͘ͳͬͨ • Ͱ͖ͨʂ
24. ͚ͩͲɺɺ
25. FatͳViewControllerʹͳΔ ΑͶ →ͳΜͱ͔͍ͨ͠ ͚ͩͲɺɺ
26. UIViewControllerAnimatedTransitioningΛ ྲྀ༻͠Α͏ class DetailModalTransition : NSObject, UIViewControllerTransitioningDelegate, UIViewControllerAnimatedTransitioning { func animateTransition(using transitionContext: UIViewControllerContextTransitioning) { if isForPresented { // present // : } else { // dissmis self.dissmisAnimation( containerView: transitionContext.containerView, from: transitionContext.viewController(forKey: .from), to: transitionContext.viewController(forKey: .to), duration: self.transitionDuration(using: transitionContext), completeTransition: transitionContext.completeTransition) } } func dissmisAnimation(containerView: UIView, from: UIViewController?, to: UIViewController?, duration: TimeInterval, completeTransition: @escaping (_ didComplete: Bool) -> Void) { // ΞχϝʔγϣϯΛॻ͘ } }
27. extension DetailModalTransition { func dissmisFluidly(viewController:UIViewController?) { guard let parent = viewController?.presentingViewController, let child = parent.presentedViewController, let window = parent.view?.window else { return } viewController?.dismiss(animated: false) { // viewDidDisappearͷޙʹݺ͹ΕΔͷͰ஫ҙ let containerView = UIView(frame: window.bounds) containerView.isUserInteractionEnabled = false window.addSubview(containerView) self.dissmisAnimation(containerView: containerView, from: child, to: parent, duration: 0.6, completeTransition: { didComplete in containerView.removeFromSuperview() }) } } } UIViewControllerAnimatedTransitioningΛ ྲྀ༻͠Α͏
28. ·ͱΊ • ը໘ભҠΞχϝʔγϣϯதʹλονΛ༗ޮʹͨ͠ • ࢦΛ཭ͨ͠ޙ͸ɺભҠઌͷViewControllerͰॲཧ͢Δ • λον͕ແࢹ͞Εͳ͘ͳͬͨ • Fluidʹͳͬͨʂʂ • ΋͏ͪΐͬͱεϚʔτͳ΍Γํ͸ͳ͍΋ͷ͔ Github : https://github.com/hirobe/DismissFluidlySample