iphone - 动画 UIView 过渡，例如将点扩展到圆圈

Question

在我的 iPhone 应用程序中，我需要实现不同类型的转换。

那是

从当前视图打开下一个视图，

它像一个点一样统计，并且该点像一个圆圈一样缓慢扩展，在圆圈中下一个视图将部分显示在圆圈的一部分中，最后圆圈完全扩展下一个视图完全出现。

我搜索了很多转换，如 CATransitions，以及可可控制器上的一些动画，但我没有找到这种类型的转换，请任何人帮助我。

Answer 1

好吧，我想我可以为您提供一种解决方法。而不是像点一样推送到下一个视图。ViewWillAppear我建议您在必须被推送的视图中添加一个简单的点动画。现在推送方法将保持不变

[self.navigationController pushViewController:NewView animated:YES];

但是在ViewWillAppear代码中，点会扩展为一个圆圈并显示其下方的新视图。希望你理解我在这里试图解释的逻辑。任何问题都让我知道。

Answer 2

就我而言，我是这样做的：

将CAShapeLayer实例设置为自定义视图子类的图层掩码属性

@interface MyCustomView ()
@property (nonatomic, strong) CircleShapeLayer *circleShapeLayer;
@end

@implementation MyCustomView

- (id) initWithFrame: (CGRect) frame {
    self = [super initWithFrame: CGRectZero];
    if (self) {
        self.layer.mask = self.shapeLayer;
        [self.layer.mask setValue: @(0) forKeyPath: @"transform.scale"];
    }
    return self;
}

将此蒙版图层缩放至全尺寸。您的视图代码：

- (void) zoom {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath: @"transform.scale"];
    animation.fromValue = [self.layer.mask valueForKeyPath: @"transform.scale"];
    animation.toValue = @(1);
    animation.duration = 2.0;
    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
    animation.delegate = self;
    // Important: change the actual layer property before installing the animation.
    [self.layer.mask setValue: animation.toValue forKeyPath: animation.keyPath];
    // Now install the explicit animation, overriding the implicit animation.
    [self.layer.mask addAnimation: animation forKey: animation.keyPath];
    return;
}

- (CAShapeLayer *) circleShapeLayer {
    if (!_ circleShapeLayer) {
        _circleShapeLayer = [SGMaskLayer layer];
        _circleShapeLayer.delegate = _shapeLayer;
        _circleShapeLayer.frame = self.bounds;
        _circleShapeLayer.needsDisplayOnBoundsChange = YES;
    }

    return _circleShapeLayer;
}

@end

遮罩层的代码：

@interface CircleShapeLayer : CAShapeLayer
@end

@implementation CircleShapeLayer

- (void) drawLayer: (CALayer *) layer inContext: (CGContextRef) ctx {
    UIGraphicsPushContext(ctx);
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect: self.bounds];
    self.path = circlePath.CGPath;
    UIGraphicsPopContext();
}

@end

从文档中：

图层的 Alpha 通道决定了图层内容和背景的显示程度。完全或部分不透明的像素允许底层内容显示出来，但完全透明的像素会阻止该内容。

此属性的默认值为 nil nil。配置遮罩时，请记住设置遮罩层的大小和位置，以确保它与遮罩的图层正确对齐。

所以我用 UIBezierPath 画了一个圆圈来实现圆形蒙版。一开始我将蒙版的比例因子设置为 0，因此视图层的任何内容都不可见。然后将比例因子设置为 1（填充图层的边界）动画，这给出了一个很好的圆形动画，增加了它从中心的半径。

您可能需要一个动画来移动您的视图的中心点。两个动画都可以包装在 CAAnimationGroup 中。

Answer 3

在第一视图中打开：

//注解的委托方法does select - (void)tapOnAnnotation:(RMAnnotation *)annotation onMap:(RMMapView *)map; { //获取GMS标记的接触点，设置为圆形transitionon pos CGPoint markerPoint = annotation.position; x = 标记点.x; y = 标记点.y;

    circleSize = 10;
    radiusChange = 0;

    //Populate Same Values to next view to close
    VenueScreen.x = x;
    VenueScreen.y = y;

    VenueScreen.view.hidden = YES;
    timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(openVenueScreen) userInfo:nil repeats:YES];
    VenueScreen.view.frame = CGRectMake(0, 0, 320, 480);
    [self.view addSubview:VenueScreen.view];

}



//Circular transition to open Next view
-(void)openVenueScreen
{
    VenueScreen.view.hidden = NO;
    VenueScreen.view.userInteractionEnabled = NO;
    VenueScreen.view.alpha = 0.9;
    self.view.userInteractionEnabled = NO;

    int rChange = 0; // Its doing proper masking while changing this value
    int radius = circleSize-rChange;

    CAShapeLayer *circleShapeLayer = [CAShapeLayer layer];

    // Make a circular shape
    circleShapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x+radiusChange, y+radiusChange, 2.0*radius, 2.0*radius)
                                                       cornerRadius:radius].CGPath;
    radiusChange = radiusChange-10;

    // Configure the apperence of the circle
    [[VenueScreen.view layer] setMask:circleShapeLayer];

    //Start Transition
    circleSize = circleSize+10;

    if (circleSize > 480)
    {
        [[VenueScreen.view layer] setMask:nil];

        [timer invalidate]; //Stop titmer

        VenueScreen.view.userInteractionEnabled = YES;
        self.view.userInteractionEnabled = YES;
        VenueScreen.view.alpha = 1;

        //Populate to next view to close
        VenueScreen.radiusChange = radiusChange;
    }

}

在下一个视图中关闭：

//Close button Action
-(IBAction)DismissVenueScreen:(id)sender;
{
    timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(dismissVenueScreen) userInfo:nil repeats:YES];
    NSLog(@"close button clciked");
}

//Circular trasition to Close window
-(void)dismissVenueScreen
{
    int rChange = 0; // Its doing proper masking while changing this value
    int radius = circleSize-rChange;

    CAShapeLayer *circleShapeLayer = [CAShapeLayer layer];
    // Make a circular shape
    circleShapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x+radiusChange,y+radiusChange, 2.0*radius, 2.0*radius)
                                                       cornerRadius:radius].CGPath;

    // Configure the apperence of the circle
    [[self.view layer] setMask:circleShapeLayer];
    self.view.layer.masksToBounds = YES;

    radiusChange = radiusChange+10;
    circleSize = circleSize-10;

    if (circleSize <= 0)
    {
        [timer invalidate]; //Stop titmer
        [[self.view layer] setMask:nil];
        [self.view removeFromSuperview];
        circleSize = 480;
    }

}