,ZPCBTIJTXJGUY",*#"TXJGU !OBLBKJKBQBO Shari minneʹಋೖͯ̍͠೥

AKIBA.swift Kyobashi.swift Shibuya.swift

@nakajijapan GMO PEPABO inc. Principal Engineer iOS / Web / OS X About Me Daichi Nakajima

ϋϯυϝΠυ࡞඼Λ ചΕΔɺങ͑Δɻ ࠃ಺࠷େڃͷ ϋϯυϝΠυϚʔέοτ

NKJMultiMovieCaptureView NKJMovieComposer NKJPagerViewController PhotoSlider Teiten GitHub Sengiri Shari frustration.me Kazaguruma

Shari

No content

ࣷར • ਣ൧ • ωλͷҾཱ͖ͯ໾

What is Shari?

UI Component IUUQTHJUIVCDPNOBLBKJKBQBO4IBSJ

No content

Why?

Why • Χʔτͷࡏݿมߋ • UIPickerViewΛར༻͍ͯͨ͠ • ૢ࡞͕̍εςοϓ஗͍ • தԝ഑ஔ͕ετϨε

Why • Χʔτͷࡏݿมߋ • UIPickerViewΛར༻͍ͯͨ͠ • ૢ࡞͕̍εςοϓ஗͍ • தԝ഑ஔ͕ετϨε ࡏݿมߋʹ̍ɺ͕̎΄ͱΜͲ

ղܾ͍ͤͨ͞

Want • UIPickerViewͷ୅ସ • ͳΔ΂͘؆୯ʹ • େྔͷࡏݿΛબ୒͢ΔϢʔβ΋ߟྀ

Goal

No content

Try!

Animation

UIPercentDrivenInte ractiveTransition

UIPercentDrivenInteractiveTransition • Interactively control view controller • Percent Driven • update(_:), cancel(), finish() • Using gesture recognizger $MBTT IUUQTEFWFMPQFSBQQMFDPNSFGFSFODFVJLJUVJQFSDFOUESJWFOJOUFSBDUJWFUSBOTJUJPO

UIViewControllerAni matorTransitioning

UIViewControllerAnimatorTransitioning • Custom ViewController Transition • Define how animation you want to make 1SPUPDPM

Πέϧ

ΠέφΠ

Problem

Problem • ࠷ॳ͔Β࠷ޙ·Ͱͷදݱ͔͠Ͱ͖ͳ͍ • ్தͷUIͷ੍ޚ͕ೖΕΒΕͳ͍

❌

No content

Implementation • Using Container View Controller

Half

Implementation modalNavigationController.parentNavigationController = navigationController navigationController?.si.presentViewController( toViewController: modalNavigationController ) • Call Customized Container View Controller

Implementation func presentViewController(toViewController:UIViewController) { toViewController.beginAppearanceTransition(true, animated: true) ModalAnimator.present(toView: toViewController.view, fromView: parentTargetView) { [weak self] in guard let strongSelf = self else { return } toViewController.endAppearanceTransition() toViewController.didMove(toParentViewController: strongSelf.base) } let tapGestureRecognizer = UITapGestureRecognizer(target: base, action: #selector(UINavigationController.overlayViewDidTap(gestureRecognizer:))) let overlayView = ModalAnimator.overlayView(fromView: parentTargetView) overlayView!.addGestureRecognizer(tapGestureRecognizer) }

Implementation func presentViewController(toViewController:UIViewController) { toViewController.beginAppearanceTransition(true, animated: true) ModalAnimator.present(toView: toViewController.view, fromView: parentTargetView) { [weak self] in guard let strongSelf = self else { return } toViewController.endAppearanceTransition() toViewController.didMove(toParentViewController: strongSelf.base) } let tapGestureRecognizer = UITapGestureRecognizer(target: base, action: #selector(UINavigationController.overlayViewDidTap(gestureRecognizer:))) let overlayView = ModalAnimator.overlayView(fromView: parentTargetView) overlayView!.addGestureRecognizer(tapGestureRecognizer) } ൒෼͚ͩදࣔ͢ΔΞχϝʔγϣϯ

Transition Background option

Implementation public class ShariNavigationController: UINavigationController { func handlePanGesture(gestureRecognizer: UIPanGestureRecognizer) { (..snip..) case .changed: var frame = view.frame frame.origin.y += degreeY frame.size.height += -degreeY view.frame = frame ModalAnimator.transitionBackgroundView( overlayView: backgroundView, location: location) (..snip..) • Get frame using UIPanGestureRecognizer

Implementation public class func transitionBackgroundView(overlayView: UIView, location:CGPoint) { let screenShotView = ModalAnimator.screenShotView(overlayView: overlayView) let scale = self.map( value: location.y, inMin: 0, inMax: UIScreen.main.bounds.height, outMin: 0.9, outMax: 1.0) let transform = CATransform3DMakeScale(scale, scale, 1) screenShotView.layer.removeAllAnimations() screenShotView.layer.transform = transform screenShotView.layoutIfNeeded() } • Transition in real time 5SBOTGFSBNPVOUPGNPWFNFOU (FU*NBHF

No content

Conclusion

Conclusion • ؆୯ʂʁ • ঢ়گΛ఻͑ͯϑΟʔυόοΫΛఏڙͰ͖Δ • ίϯςΩετΛҡ࣋Ͱ͖Δ • ϛεΛࣄલʹ๷͛Δ

Conclusion • minneͷσβΠϯίϯϙʔωϯτͷҰͭ • Χʔτ - ࡏݿมߋ • ചΕͨ΋ͷ - ߜΓࠐΈ • ࡞඼ը໘ - Φϓγϣϯબ୒

Shari

Thanks.