xCode Paper Onboarding 效果

Question

我们如何实现 Paper Onboarding 效果。我在里面有一个 containerview 和 3viewconroller。我们可以在下面实现相同的东西吗？

this is snapchat chat camera moving effect

Answer 1

我认为你必须阅读这个问题。

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

先了解前两个阶段。

然后从 github 下载 Stage 3：Shrink-Wrapping 代码。在该代码下，最后用以下代码替换“PrivateAnimatedTransition”实现。

@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;
}

和“BINGO”你已经完成了。只需将 buttonFrame 替换为实际选择的索引按钮的框架。有任何问题欢迎咨询