在视图控制器之间展开圆形动画过渡

Question

我使用转换委托创建了一个自定义动画转换：

vc.modalTransitionStyle = UIModalPresentationCustom;
vc.transitioningDelegate = self.transitioningDelegate;

过渡代理运行良好，但我正在尝试实现迄今为止尚未成功的效果。 我正在尝试让新的视图控制器看起来像这样：

Cool animated tranisitoning

我尝试过 CGAffineTransformMakeScale，但它会缩放新的视图控制器视图，而不是仅仅“将视野扩大到其中”。当试图用动画改变边界和框架时，它总是使最后的圆圈与屏幕边界相匹配，并且不会像我给出的动画那样完全打开圆圈。

有什么想法吗？

谢谢。

Answer 1

我对这个问题的第一个答案是我不久前制作的应用程序的修改版本，现在不是最好的方法（iOS 7 及更高版本）。在 iOS 7 中，我们可以使用 UIViewControllerTransitioningDelegate 以及相关的委托和类来创建自定义转换。此版本将所有蒙版创建和调整大小封装在 animator 对象（符合 UIViewControllerAnimatedTransitioning 的那个）中，因此它使控制器代码更简单，允许您使用任何控制器作为目标控制器而无需特殊代码。这是我在进行演示的课程中使用的代码，

#import "ViewController.h"
#import "SecondViewController.h"
#import "RDPresentationAnimator.h"

@interface ViewController () <UIViewControllerTransitioningDelegate>
@property (weak,nonatomic) IBOutlet UIButton *button;
@end

@implementation ViewController

-(IBAction)presentSecondController:(UIButton *)sender {
    self.button = sender;
    SecondViewController *second = [self.storyboard instantiateViewControllerWithIdentifier:@"Second"];
    second.modalTransitionStyle = UIModalPresentationCustom;
    second.transitioningDelegate = self;
    [self presentViewController:second animated:YES completion:nil];
}

-(id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
    RDPresentationAnimator *animator = [RDPresentationAnimator new];
    animator.isPresenting = YES;
    animator.senderFrame = self.button.frame;
    return animator;
}


-(id <UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
    NSLog(@"dismissed delegate called");
    RDPresentationAnimator *animator = [RDPresentationAnimator new];
    animator.isPresenting = NO;
    animator.senderFrame = self.button.frame;
    return animator;
}

这是动画对象中的代码。 .h，

@interface RDPresentationAnimator : NSObject <UIViewControllerAnimatedTransitioning>

@property (nonatomic) BOOL isPresenting;
@property (nonatomic) CGRect senderFrame;

这是.m，

@interface RDPresentationAnimator ()
@property (strong,nonatomic) UIBezierPath *maskPath;
@property (strong,nonatomic) UIViewController *toVC;
@property (strong,nonatomic) UIViewController *fromVC;
//@property (strong,nonatomic) id <UIViewControllerContextTransitioning> transitionContext;
@end

    @implementation RDPresentationAnimator

    #define ANIMATION_TIME 0.6



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


    - (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext {
       // self.transitionContext = transitionContext;
        self.fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
        self.toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];

        if (self.isPresenting) {
            [transitionContext.containerView addSubview:self.fromVC.view];
            [transitionContext.containerView addSubview:self.toVC.view];

            self.maskPath = [UIBezierPath bezierPathWithOvalInRect:self.senderFrame];
            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
            maskLayer.frame = self.toVC.view.frame;
            maskLayer.path = self.maskPath.CGPath;
            self.toVC.view.layer.mask = maskLayer;

            UIBezierPath *newPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-self.toVC.view.frame.size.width/2, -self.toVC.view.frame.size.height/2, self.toVC.view.frame.size.height*2, self.toVC.view.frame.size.height*2)];
            CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
            //pathAnim.delegate = self;
            pathAnim.fromValue = (id)self.maskPath.CGPath;
            pathAnim.toValue = (id)newPath.CGPath;
            pathAnim.duration = ANIMATION_TIME;
            maskLayer.path = newPath.CGPath;
            [maskLayer addAnimation:pathAnim forKey:@"path"];
        }else{
            [transitionContext.containerView addSubview:self.toVC.view];
            [transitionContext.containerView addSubview:self.fromVC.view];
            self.maskPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-self.fromVC.view.frame.size.width/2, -self.fromVC.view.frame.size.height/2, self.fromVC.view.frame.size.height*2, self.fromVC.view.frame.size.height*2)];
            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
            maskLayer.frame = self.fromVC.view.frame;
            maskLayer.path = self.maskPath.CGPath;
            self.fromVC.view.layer.mask = maskLayer;

            UIBezierPath *newPath = [UIBezierPath bezierPathWithOvalInRect:self.senderFrame];
            CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
            //pathAnim.delegate = self;
            pathAnim.fromValue = (id)self.maskPath.CGPath;
            pathAnim.toValue = (id)newPath.CGPath;
            pathAnim.duration = ANIMATION_TIME;
            maskLayer.path = newPath.CGPath;
            [maskLayer addAnimation:pathAnim forKey:@"path"];
        }

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



    -(void)finishTransition:(id <UIViewControllerContextTransitioning>)transitionContext {
        [transitionContext completeTransition:YES];
    }


    //- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    //    NSLog(@"In didStop");
    //    if (flag) {
    //        if (self.isPresenting) {
    //            self.toVC.view.layer.mask = nil;
    //            [self.transitionContext completeTransition:YES];
    //        }else{
    //            self.fromVC.view.layer.mask = nil;
    //            [self.transitionContext completeTransition:YES];
    //            self.transitionContext = nil;
    //        }
    //    }
    //}


    -(void)dealloc {
        NSLog(@"In animator dealloc");
    }

当您关闭模态控制器时，此代码还具有反向动画（您只需像在该类中一样调用dismissViewControllerAnimated:completion:）。

Answer 2

我过去做过类似的东西，但它没有那个扩大的橙色环。我的 InitialViewController 在情节提要中添加了一个按钮，该按钮具有圆形遮罩和背景图像。我呈现的视图控制器有一个掩码，它的大小和位置是通过传入 InitialViewController 中触发呈现的按钮的框架来设置的。呈现的视图控制器定义了一个协议，其一个方法在动画结束时被调用。这是初始视图控制器中的代码，

#import "InitialViewController.h"
#import "ViewController.h"

@interface InitialViewController () <ExpandingViewDelegate>
@end

@implementation InitialViewController


-(IBAction)expandToDetail:(UIButton *)sender { 
    ViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"VC"];
    vc.delegate = self;
    vc.buttonRect = sender.frame;
    [self.view addSubview:vc.view];
}


-(void)viewFinishedAnimating:(UIViewController *) sender { // delegate method from the presentedViewController
    [sender.view removeFromSuperview];
    [self presentViewController:sender animated:NO completion:nil];
}

这是呈现的视图控制器中的代码，它执行掩码扩展。 .h 文件，

@protocol ExpandingViewDelegate <NSObject>
-(void)viewFinishedAnimating:(UIViewController *) sender;
@end

@interface ViewController : UIViewController

@property (nonatomic) CGRect buttonRect;
@property (weak,nonatomic) id<ExpandingViewDelegate> delegate;
@end

.m 文件，

@interface ViewController ()
@property (strong,nonatomic) UIBezierPath *maskPath;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.maskPath = [UIBezierPath bezierPathWithOvalInRect:self.buttonRect];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.view.frame;
    maskLayer.path = self.maskPath.CGPath;
    self.view.layer.mask = maskLayer;
    [self enlargeMask:maskLayer];
}

-(void)enlargeMask:(CAShapeLayer *) shapeLayer {

    UIBezierPath *newPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(-self.view.frame.size.width/2, -self.view.frame.size.height/2, self.view.frame.size.height*2, self.view.frame.size.height*2)];
    CABasicAnimation* pathAnim = [CABasicAnimation animationWithKeyPath: @"path"];
    pathAnim.delegate = self;
    pathAnim.fromValue = (id)self.maskPath.CGPath;
    pathAnim.toValue = (id)newPath.CGPath;
    pathAnim.duration = 6;
    shapeLayer.path = newPath.CGPath;
    [shapeLayer addAnimation:pathAnim forKey:@"path"];
}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    if (flag) {
        self.view.layer.mask = nil;
        [self.delegate viewFinishedAnimating:self];
    }
}