ios - CABasicAnimation - transform scale keep in center -
trying animatie ellipse masked on uiview scale transformed remaining in center position.
i have found calayer - cabasicanimation not scaling around center/anchorpoint, , followed adding bounds
property masklayer
cashapelayer
however, ends mask being positioned in left corner 1/4 of showing. mask remain within center of screen.
@synthesize maskedview; - (void)viewdidload { [super viewdidload]; uiviewcontroller *vc = [self.storyboard instantiateviewcontrollerwithidentifier:@"next"]; vc.view.frame = cgrectmake(0,0, self.view.frame.size.width, self.view.frame.size.height); vc.view.layer.bounds = self.view.layer.bounds; cashapelayer *masklayer = [[cashapelayer alloc] init]; cgrect maskrect = cgrectmake((self.view.frame.size.width/2)-50, (self.view.frame.size.height/2)-50, 100, 100); cgmutablepathref path = cgpathcreatemutable(); cgpathaddellipseinrect(path, nil, maskrect); [masklayer setpath:path]; cgpathrelease(path); vc.view.layer.mask = masklayer; [self.view addsubview:vc.view]; maskedview = vc.view; [self startanimation]; }
animation...
-(void)startanimation { maskedview.layer.mask.bounds = cgrectmake((self.view.frame.size.width/2)-50, (self.view.frame.size.height/2)-50, 100, 100); maskedview.layer.mask.anchorpoint = cgpointmake(.5,.5); maskedview.layer.mask.contentsgravity = @"center"; cabasicanimation *animation = [cabasicanimation animationwithkeypath:@"transform.scale"]; animation.duration = 1.0f; animation.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; animation.fromvalue = [nsnumber numberwithfloat:1.0f]; animation.tovalue = [nsnumber numberwithfloat:5.0f]; [maskedview.layer.mask addanimation:animation forkey:@"animatemask"]; }
update
i seem have fixed second animation on position
key. correct or there better way of doing this?
cabasicanimation *animation2 = [cabasicanimation animationwithkeypath:@"position"]; animation2.duration = 1.0f; animation2.timingfunction = [camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout]; animation2.fromvalue = [nsvalue valuewithcgpoint:cgpointmake((self.view.frame.size.width/2), (self.view.frame.size.height/2))]; animation2.tovalue = [nsvalue valuewithcgpoint:cgpointmake((self.view.frame.size.width/2), (self.view.frame.size.height/2))]; [tobemask.layer.mask addanimation:animation2 forkey:@"animatemask2"];
you can create scale around center of object instead of (0, 0) this:
cabasicanimation *scale = [cabasicanimation animationwithkeypath:@"transform"]; catransform3d tr = catransform3didentity; tr = catransform3dtranslate(tr, self.bounds.size.width/2, self.bounds.size.height/2, 0); tr = catransform3dscale(tr, 3, 3, 1); tr = catransform3dtranslate(tr, -self.bounds.size.width/2, -self.bounds.size.height/2, 0); scale.tovalue = [nsvalue valuewithcatransform3d:tr];
so start out "identity" transform (which means 'no transform'). translate (move) center of object. scale. move origo we're started (we wanted affect scale operation).
Comments
Post a Comment