ios - Animate CAShapeLayer's bezier path with animation from center -

i'm trying animate chart scales center. scales left right.

initial state:

final state:

animation:

here code:

masklayer = [[cashapelayer alloc] init]; masklayer.bordercolor=[uicolor redcolor].cgcolor; masklayer.borderwidth=1; masklayer.fillcolor=uicolorfromrgb(0x91e5ff).cgcolor; masklayer.frame = cgrectmake(0,0, rect.size.width, rect.size.height); masklayer.path = finalpath.cgpath; masklayer.opacity=0.8; [self.layer addsublayer:masklayer];  cabasicanimation *anim = [cabasicanimation animationwithkeypath:@"path"]; anim.duration = 4; anim.timingfunction=[camediatimingfunction functionwithname:kcamediatimingfunctionlinear]; anim.removedoncompletion = no; anim.fillmode = kcafillmodeboth; anim.fromvalue = (id)[initialpath cgpath]; anim.tovalue= (id)[finalpath cgpath]; [masklayer addanimation:anim forkey:nil]; 

to results want, can't scale - you'll have same path @ start , finish. stated example has path animation.

all have draw paths in relation each other, way want them animate. if want animate path if it's anchored in center, need draw them that. center both paths on each other.

here's simple example:

uibezierpath* initialpath = [uibezierpath bezierpathwithrect: cgrectmake(-25, -25, 50, 50)]; uibezierpath* finalpath = [uibezierpath bezierpathwithrect: cgrectmake(-40, -40, 80, 80)]; 

in example, square scale center. if path scaling right, it's because thats paths aligned.