Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Custom Transitions in iOS 7 - Cocoaheads Berlin...
Search
Engin Kurutepe
October 16, 2013
Technology
1
800
Custom Transitions in iOS 7 - Cocoaheads Berlin Talk
Presented on 16.10.2013 in Cocoaheads Berlin
Engin Kurutepe
October 16, 2013
Tweet
Share
Other Decks in Technology
See All in Technology
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
830
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
610
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
700
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
540
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
200
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
240
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
190
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.9k
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
220
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
900
It's Worth the Effort
3n
187
28k
Faster Mobile Websites
deanohume
310
31k
Building Adaptive Systems
keathley
43
2.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Context Engineering - Making Every Token Count
addyosmani
6
240
Unsuck your backbone
ammeep
671
58k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Building an army of robots
kneath
306
46k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
Custom Transitions in iOS 7 by Engin Kurutepe Cocoaheads Berlin
- 16. Oct 2013
Who? • Engin Kurutepe – @ekurutepe • iOS Team Lead
at Txtr – www.txtr.com • Co-author of Developing an iOS 7 Edge http://bleedingedgepress.com/our-books/ developing-an-ios-7-edge/
Roadmap • Which transitions can be customized? • Anatomy of
a custom transition • A simple example • An interactive example
What can be customized? • Demo Time!
Anatomy A lot of protocols: • UIViewControllerTransitioningDelegate • UIViewControllerInteractiveTransitioning •
UIViewControllerAnimatedTransitioning • UIViewControllerTransitionCoordinator • UIViewControllerContextTransitioning • UIViewControllerTransitionCoordinatorContext
None
Tap!
Tap!
UIKit
UIKit -transitioningDelegate
UIKit TransitioningDelegate
UIKit TransitioningDelegate animationControllerForPresentedController: presentingController: sourceController:
UIKit TransitioningDelegate AnimationController
UIKit TransitioningDelegate AnimationController interactionControllerForPresentation:
UIKit TransitioningDelegate InteractionController AnimationController
UIKit TransitioningDelegate InteractionController AnimationController TransitioningContext
UIKit TransitioningDelegate InteractionController AnimationController TransitioningContext
in Practice… • Assign the transitioning delegate: • Full source
code on Github: https://github.com/iosedgeapp/iOSEdge - (IBAction) presentTapped:(UIButton*)sender { BEPSimpleImageViewController* ivc = [[BEPSimpleImageViewController alloc] init]; ivc.image = [UIImage imageNamed:@"Canyon.jpg"]; ivc.modalPresentationStyle = UIModalPresentationCustom; ivc.transitioningDelegate = self; [self presentViewController:ivc animated:YES completion:nil]; }
in Practice (cont’d) • Transitioning delegate vends an animator: -
(id<UIVCAnimatedTransitioning>) animationControllerForPresentedController:(UIVC*)modal presentingController:(UIVC*)parent sourceController:(UIVC*)source { return [[BEPModalTransitionAnimator alloc] initWithDirection:BEPModelTransitionDirectionPresent]; }
in Practice (cont’d) • Transitioning delegate does not vend an
interaction controller // Not implemented: //- (id<UIViewControllerInteractiveTransitioning>) interactionControllerForPresentation: (id<UIViewControllerAnimatedTransitioning>)animator
in Practice (cont’d) • The animator sets the duration for
the transition - (NSTimeInterval) transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext { return 0.75; }
in Practice (cont’d) • The animator performs the animations -
(void) animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext { UIView* inView = [transitionContext containerView]; UIVC* fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey]; UIView* fromView = [fromVC view]; UIVC* toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIView* toView = [toVC view]; if (self.direction == BEPModelTransitionDirectionPresent) { [self performPresentationAnimations]; } else { [self performDismissalAnimations]; } }
in Practice (cont’d) • The animator inserts the presented view
• The animator MUST inform the context when transition is finished [inView insertSubview:toView aboveSubview:fromView]; [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0 usingSpringWithDamping:DampingConstant initialSpringVelocity:InitialVelocity options:0 animations:^{ toView.alpha = 1.0; toView.frame = finalRect; toView.transform = CGAffineTransformIdentity; } completion:^(BOOL finished) { [transitionContext completeTransition:YES]; }];
How about interaction? • Demo Time!
How about interaction? • Transitioning Delegate must vend an interaction
controller • Apple provides the UIPercentDrivenInteractiveTransition class • Can drive UIView block-based animations
in Practice… • Transitioning Delegate vends an interaction controller: -
(id <UIVCInteractiveTransitioning>) navigationController:(UINavigationController*)nc interactionControllerForAnimationController:(id<UIVCAnimatedTransitioning>)animator { if (animator == _popper && _popper.interactive) { return _popper; } else { return nil; } }
in Practice (cont’d) • Previously during viewDidAppear… • but not
interactive, no? self.popper = [[BEPNavigationTransitionsPopAnimator alloc] initWithNavigationController:self]; _popper.interactive = NO;
in Practice (cont’d) • Previously during viewDidAppear… • but not
interactive, no? self.popper = [[BEPNavigationTransitionsPopAnimator alloc] initWithNavigationController:self]; _popper.interactive = NO; - (instancetype) initWithNavigationController:(UINavigationController*)nc { if (self = [super init]) { self.parent = nc; UIPinchGestureRecognizer* pgr = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinch:)]; [self.parent.view addGestureRecognizer:pgr]; } return self; }
in Practice (cont’d) • but still not interactive?
in Practice (cont’d) • but still not interactive? - (void)
handlePinch:(UIPinchGestureRecognizer*)gr { CGFloat scale = [gr scale]; switch ([gr state]) { case UIGestureRecognizerStateBegan: self.interactive = YES; _startScale = scale; [self.parent popViewControllerAnimated:YES]; break;
in Practice (cont’d) • Popper driving the animation:
in Practice (cont’d) • Popper driving the animation: case UIGestureRecognizerStateChanged:
{ CGFloat percent = (1.0 - scale/_startScale); [self updateInteractiveTransition:MAX(percent,0.0)]; break; } case UIGestureRecognizerStateEnded: case UIGestureRecognizerStateCancelled: if ([gr velocity] >= 0.0 || [gr state] == UIGestureRecognizerStateCancelled) { [self cancelInteractiveTransition]; } else { [self finishInteractiveTransition]; } self.interactive = NO; break; default: break; } }
Re-cap • Custom transitions very powerful • Complex set of
protocols • But in practice, it’s not that hard… • Source code for the examples available: https://github.com/iosedgeapp/iOSEdge
Further Reading • WWDC 2013 Session 218 • objc.io article
by Chris Eidhof http://www.objc.io/issue-5/view-controller- transitions.html • Developing an iOS 7 Edge (40% off for Cocoaheads): https://gumroad.com/ products/yLKx/cocoaheads