UIView 遮罩透明。

Question

我使用 CAShapeLayer 来创建实心圆（图片 #1）。

现在我想用另一个更小的圆圈来掩盖那个圆圈，所以它看起来像图像 #2。

稍后我将通过减小蒙版的比例来动画填充（图 3）圆圈。

我怎样才能做到这一点？

Answer 1

我不确定以下方法的正确性如何正确；直接使用CALayers 可能会更好...

但是，如果您正在使用的视图/图层非常简单，那么以下代码可能足以满足您的需要。

它基于使用内部/较小圆圈的子视图 - 然后为 UIView 上的 transform 属性设置动画。

以防万一，这里有一个指向 Apple 文档Animating Views 的链接。

代码如下：

@implementation ViewController
{
    UIView* _innerCircleView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView* outerCircleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];

    UIBezierPath* bigCircle = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:100 startAngle:0 endAngle:(M_PI * 2) clockwise:YES];
    [bigCircle closePath];
    CAShapeLayer* bigCircleLayer = [CAShapeLayer new];
    [bigCircleLayer setPath:bigCircle.CGPath];
    bigCircleLayer.fillColor = [UIColor blackColor].CGColor;
    [outerCircleView.layer addSublayer:bigCircleLayer];

    _innerCircleView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    UIBezierPath* smallerCircle = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:50 startAngle:0 endAngle:(M_PI * 2) clockwise:YES];
    [smallerCircle closePath];
    CAShapeLayer* smallCircleLayer = [CAShapeLayer new];
    [smallCircleLayer setPath:smallerCircle.CGPath];
    smallCircleLayer.fillColor = [UIColor whiteColor].CGColor;
    [_innerCircleView.layer addSublayer:smallCircleLayer];

    [outerCircleView addSubview:_innerCircleView];
    [self.view addSubview:outerCircleView];

    UIButton* animateButton = [[UIButton alloc] initWithFrame:CGRectMake(100, 300, 100, 50)];
    animateButton.backgroundColor = [UIColor blueColor];
    [animateButton setTitle:@"Animate" forState:UIControlStateNormal];
    [animateButton addTarget:self action:@selector(animateTap:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:animateButton];
}

- (void)animateTap:(id)s
{
    [UIView animateWithDuration:3.0f animations:^(){
        _innerCircleView.transform = CGAffineTransformScale(_innerCircleView.transform, 0.5, 0.5);
    }];
}

还有来自模拟器的快速之前和之后：