Gap between two connected UIViews with cornerRadius while animating

Viewed 39

I want to create a tipsView with a pop animate like this:

tips

But as the gif show, there is a very thin gap between the two connected view while animating;

Then I made a demo to find out the main cause and finally got the cornerRadius property. Here is demo code:

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.containerView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 214, 40)];
    [self.view addSubview:self.containerView];
    
    self.subView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 214, 34)];
    self.subView1.backgroundColor = [UIColor grayColor];
    self.subView1.layer.cornerRadius = 6.0;
    self.subView1.layer.masksToBounds = YES;
    [self.containerView addSubview:self.subView1];
    
    self.subView2 = [[UIView alloc] initWithFrame:CGRectMake(100, 34, 14, 6)];
    self.subView2.backgroundColor = [UIColor darkGrayColor];
    [self.containerView addSubview:self.subView2];
    
    self.containerView.transform = CGAffineTransformMakeScale(0.01, 0.01);
    
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
    [self.view addGestureRecognizer:tap];
}

- (void)tap:(UITapGestureRecognizer *)sender {
    [UIView animateWithDuration:10 animations:^{
        self.containerView.transform = CGAffineTransformIdentity;
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:10 animations:^{
            self.containerView.transform = CGAffineTransformMakeScale(0.01, 0.01);
        }];
    }];
}

The gif:

demo

and once I delete the line which used to set the cornerRadius property(or just set to 0), its behavior was in line with expectations. The gif after deleting:

demo after deleting

I wander why the cornerRadius property cause this result, and how I can fix it.

I find a similar question and the solution here, but I don't want to combine two views into one with bezier curve.

0 Answers
Related