xCode Paper Onboarding effect

Question

How can we implement Paper Onboarding effect. I have one containerview and 3viewconroller inside that. can we implemented same below thing?

this is snapchat chat camera moving effect

Answer 1

I think you have to read this issue.

https://www.objc.io/issues/12-animations/custom-container-view-controller-transitions/

Understand the first two stages first.

Then download Stage 3: Shrink-Wrapping code from github. Under that code replace "PrivateAnimatedTransition" implementation at last with following code.

@implementation PrivateAnimatedTransition

static CGFloat const kChildViewPadding = 16;
static CGFloat const kDamping = 0.75;
static CGFloat const kInitialSpringVelocity = 0.5;

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
    return 0.3;
}

/// Slide views horizontally, with a bit of space between, while fading out and in.
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

    UIView *containerView = [transitionContext containerView];

    UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    //UIButton *button = fromViewController.button;

    [containerView addSubview:toViewController.view];

    CGRect buttonFrame = CGRectMake(300, 450, 10, 10);

    UIBezierPath *circleMaskPathInitial = [UIBezierPath bezierPathWithOvalInRect:buttonFrame];
    CGPoint extremePoint = CGPointMake(305, 455);
    CGFloat radius = sqrt((extremePoint.x * extremePoint.x) + (extremePoint.y * extremePoint.y));
    UIBezierPath *circleMaskPathFinal = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(buttonFrame, -radius, -radius)];

    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.path = circleMaskPathFinal.CGPath;
    toViewController.view.layer.mask = maskLayer;

    CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
    maskLayerAnimation.fromValue = (__bridge id _Nullable)(circleMaskPathInitial.CGPath);
    maskLayerAnimation.toValue = (__bridge id _Nullable)(circleMaskPathFinal.CGPath);
    maskLayerAnimation.duration = [self transitionDuration:transitionContext];
    [maskLayer addAnimation:maskLayerAnimation forKey:@"path"];

    [self performSelector:@selector(finishTransition:) withObject:transitionContext afterDelay:[self transitionDuration:transitionContext]];
}

- (void)finishTransition:(id <UIViewControllerContextTransitioning>)transitionContext {
    [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
}

and "BINGO" you have done. Just replace buttonFrame with actual selected index button's frame. Feel free to ask any query