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 Talk
Search
Engin Kurutepe
October 16, 2013
Technology
1
790
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
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい5個のコツ - / How to start Scrum that is not written in the Scrum Guide
takaking22
14
5.3k
プレイヤーとしてのチームのテスト力UP/Improving team skills for testing
goyoki
2
230
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
yukihirochiba
0
380
S3成長記録@Storage-JAWS#3
p0n
0
130
テストだけで品質は上がらない?! エセ自己組織化した品質組織からの脱却 / JaSST'24 Tokyo
visional_engineering_and_design
9
3k
履歴データテーブルとの向き合い方_PHPerKaigi2024
gennei
25
6.7k
Pass On What You Have Learned: Deploying to Production
ianlee1521
0
150
【OpenAI本出版記念】npakaによるOpenAI最新技術情報と技術情報キャッチアップ術
npaka
8
1.5k
スケジュール指定のFargate Spotと友達になれた話
news_it_enj
0
240
AWSアカウント74件をバックアップした方法と課題
chiharutsuboi
0
110
【OpsJAWS】EC2 のセキュリティの運用と監視について考えてみた件
hssh2_bin
4
600
Microsoft Fabric 開発ガイド
ryomaru0825
6
2.7k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Embracing the Ebb and Flow
colly
78
4.1k
Ruby is Unlike a Banana
tanoku
95
10k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
A better future with KSS
kneath
230
16k
GitHub's CSS Performance
jonrohan
1023
450k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
56
13k
Making Projects Easy
brettharned
106
5.4k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
What's in a price? How to price your products and services
michaelherold
236
11k
Navigating Team Friction
lara
177
13k
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