ios - Animating a box drawn in drawRect via CGMutablePathRef -
my aim drow empty rounded box, should appear hole, onto uiview show what's under. made overriding drawrect method shown below. gives me ability create rounded rect of size of holerect property (which cgrect), drop inner shadow , place on view, clearing (using clearcolor , cgcontextsetblendmode(context, kcgblendmodesourceout) )the area covered box , revealing what's behind view (i took code this question , modified it) . problem have move , resize rect animation, , can't find way so, maybe choose wrong way i'm not expert in drawing hint appreciated.
- (void)drawrect:(cgrect)rect { //i set frame of "holey" rect cgrect bounds = self.holerect; cgcontextref context = uigraphicsgetcurrentcontext(); cgfloat radius = 20; //fill whole view gray cgcontextsetfillcolorwithcolor( context, [uicolor colorwithred:.5 green:.5 blue:.5 alpha:.8].cgcolor ); cgcontextfillrect( context, rect ); // create "visible" path, shape gets inner shadow // in case it's rounded rect, complex want cgmutablepathref visiblepath = cgpathcreatemutable(); cgrect innerrect = cgrectinset(bounds, radius, radius); cgpathmovetopoint(visiblepath, null, innerrect.origin.x, bounds.origin.y); cgpathaddlinetopoint(visiblepath, null, innerrect.origin.x + innerrect.size.width, bounds.origin.y); cgpathaddarctopoint(visiblepath, null, bounds.origin.x + bounds.size.width, bounds.origin.y, bounds.origin.x + bounds.size.width, innerrect.origin.y, radius); cgpathaddlinetopoint(visiblepath, null, bounds.origin.x + bounds.size.width, innerrect.origin.y + innerrect.size.height); cgpathaddarctopoint(visiblepath, null, bounds.origin.x + bounds.size.width, bounds.origin.y + bounds.size.height, innerrect.origin.x + innerrect.size.width, bounds.origin.y + bounds.size.height, radius); cgpathaddlinetopoint(visiblepath, null, innerrect.origin.x, bounds.origin.y + bounds.size.height); cgpathaddarctopoint(visiblepath, null, bounds.origin.x, bounds.origin.y + bounds.size.height, bounds.origin.x, innerrect.origin.y + innerrect.size.height, radius); cgpathaddlinetopoint(visiblepath, null, bounds.origin.x, innerrect.origin.y); cgpathaddarctopoint(visiblepath, null, bounds.origin.x, bounds.origin.y, innerrect.origin.x, bounds.origin.y, radius); cgpathclosesubpath(visiblepath); // fill path uicolor *acolor = [uicolor clearcolor]; [acolor setfill]; cgcontextaddpath(context, visiblepath); cgcontextsetblendmode(context, kcgblendmodesourceout); cgcontextfillpath(context); // create larger rectangle, we're going subtract visible path // , apply shadow cgmutablepathref path = cgpathcreatemutable(); //(when drawing shadow path whichs bounding box not known pass "cgpathgetpathboundingbox(visiblepath)" instead of "bounds" in following line:) //-42 cuould offset > 0 cgpathaddrect(path, null, cgrectinset(bounds, -42, -42)); // add visible path (so gets subtracted shadow) cgpathaddpath(path, null, visiblepath); cgpathclosesubpath(path); // add visible paths clipping path context cgcontextaddpath(context, visiblepath); cgcontextclip(context); // setup shadow properties on context acolor = [uicolor colorwithred:0.0f green:0.0f blue:0.0f alpha:0.5f]; cgcontextsavegstate(context); cgcontextsetshadowwithcolor(context, cgsizemake(0.0f, 1.0f), 5.0f, [acolor cgcolor]); // fill rectangle, shadow gets drawn [acolor setfill]; cgcontextsavegstate(context); cgcontextaddpath(context, path); cgcontexteofillpath(context); // release paths //cgpathrelease(path); cgpathrelease(visiblepath); }
take @ answer gave question punching hole in uiimageview:
https://stackoverflow.com/a/8632731/341994
notice way works uiimageview's superview's layer has sublayer masking , punches hole. means animate hole, have animate movement of sublayer. that's simple core animation, described in book:
http://www.apeth.com/iosbook/ch17.html#_using_a_cabasicanimation
in other words, if can encapsulate you're doing layer, animating moving layer trivial.
Comments
Post a Comment