ios - UIView mask transparent. -

i use cashapelayer create filled circle (image #1).

now mask circle smaller circle, looks image #2.

later animate filling (image #3) circle reducing scale of mask.

how can achieve this?

i'm not sure how correct following approach is; might better work calayers directly...

however, if views/layers you're working quite simple, following code might enough need.

it's based around using subview inner/smaller circle - , animating transform property on uiview.

just in case it's useful, here's link apple's doc on animating views.

here's code:

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

and quick before , after simulator: