Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UIKonf 2014 - Building Better Transition

eallam
May 14, 2014

UIKonf 2014 - Building Better Transition

Build better transitions on iOS by standing on the shoulders of the disney animators by using their principles of animation. Also, animated transitions are selfish jerks because they block interaction so turn all your animated transitions into "interactive" animated transitions.

eallam

May 14, 2014
Tweet

More Decks by eallam

Other Decks in Technology

Transcript

  1. Stretch and Squash. Timing. Anticipation. Staging. Follow-through and Overlapping Action.

    Straight Ahead Action and Pose-to-Pose Action. Slow in and Slow out. Arcs. Exaggeration. Secondary Action. Appeal.
  2. In animateTransition: toView.bounds = CGRectMake(0, 0, 280, 180); toView.center =

    CGPointMake(container.center.x, -90); [container addSubview:toView];
  3. In animateTransition: UIView *container = [transitionContext containerView]; CATransform3D perspective =

    CATransform3DIdentity; perspective.m34 = - 1.0 / 500.0; container.layer.sublayerTransform = perspective;
  4. Rotate toView around x-axis toView.layer.anchorPoint = CGPointMake(0.5, 0); toView.layer.position =

    adjustedPosition; toView.layer.transform = CATransform3DMakeRotation(M_PI_4, 1.0, 0, 0);
  5. [UIView animateWithDuration:duration animations:^{ toView.layer.transform = CATransform3DIdentity; toView.layer.position = centerPosition; }

    completion:^(BOOL finished) { container.layer.sublayerTransform = CATransform3DIdentity; toView.layer.transform = CATransform3DIdentity; toView.layer.anchorPoint = CGPointMake(0.5, 0.5); toView.layer.position = container.center; [transitionContext completeTransition:YES]; }];
  6. Guidelines for 3D transitions · Reset anchor points, transform, and

    positions on completion · Add perspective using the container view's sublayerTransform · Spring animations generally don't look right
  7. Presenting self.startingPoint = self.sharedView.center; self.startingBounds = self.sharedView.bounds; self.sharedView.center = [toView

    convertPoint:self.startingPoint fromView:fromView]; [toView addSubview:self.sharedView];
  8. Animate [UIView animateWithDuration:duration animations:^{ toView.center = container.center; self.sharedView.center = CGPointMake(140,

    90); self.sharedView.bounds = CGRectMake(0, 0, 100, 100); } completion:^(BOOL finished) { [transitionContext completeTransition:YES]; }];
  9. Dismissal animation [UIView animateWithDuration:duration animations:^{ fromView.center = CGPointMake(container.center.x, -90); self.sharedView.center

    = [fromView convertPoint:self.startingPoint fromView:toView]; self.sharedView.bounds = self.startingBounds; }
  10. Use the finished param completion:^(BOOL finished) { if (finished){ [gesture.view

    removeGestureRecognizer:gesture]; [transitionContext finishInteractiveTransition]; [transitionContext completeTransition:YES]; } }]
  11. Move view as pan changes CGPoint translation = [gesture translationInView:container];

    CGPoint viewCenter = toView.center; viewCenter.x += translation.x; viewCenter.y += translation.y; toView.center = viewCenter; [gesture setTranslation:CGPointZero inView:[self.context containerView]];
  12. Finish or cancel when pan ends if (shouldFinish) { [self.context

    finishInteractiveTransition]; // Animate to center }else{ [self.context cancelInteractiveTransition]; // Animate off screen }
  13. "For smooth start to the animation, match this value to

    the view’s velocity as it was prior to attachment"
  14. Create right before animation starts self.startTime = CACurrentMediaTime(); self.displayLink =

    [CADisplayLink displayLinkWithTarget:self selector:@selector(tick:)]; [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
  15. Calculate and update percent complete - (void)tick:(CADisplayLink *)link { CGFloat

    complete = (link.timestamp - self.startTime) / duration; [self.context updateInteractiveTransition:complete]; }
  16. Credits The 12 Principles GIFs by Vincenzo Lodigiani the12principles.tumblr.com Banana

    Fingers Photo: flic.kr/p/9KUF1r "Transitional Interfaces" by Pasquale D'Silva "Animated UI Transitions and Perception of Time"