core graphics - iOS: CAShape Layer Path Transformation -
i have used cashape layer before doing basic transformation on paths - smaller circle larger circle. enough, tried transform triangle circle; worked, transformation weird. other words, 1 shape another, "flips", "twists" before final shape formed. same shapes, there no problem - circle circle - different shapes, transformation weird.
i wonder if expected way? or there other tricks or workarounds can smoothly , proportionally transform 1 shape different shape using cashape layer(or there other ways of doing this; doesn't have cashape layer)? in advance.
by choosing control points, etc, can cook path draws triangle, has same number of segments , control points circle want draw. (all numeric values assume iphone screen, point general):
@implementation viewcontroller { cashapelayer* shapelayer; } - (void)viewdidload { [super viewdidload]; // additional setup after loading view, typically nib. shapelayer = [[cashapelayer alloc] init]; cgrect bounds = self.view.bounds; bounds.origin.x += 0.25 * bounds.size.width; bounds.size.width *= 0.5; bounds.origin.y += 0.25 * bounds.size.height; bounds.size.height *= 0.5; shapelayer.frame = bounds; shapelayer.backgroundcolor = [[uicolor redcolor] cgcolor]; [self.view.layer addsublayer: shapelayer]; [self tocircle: nil]; } cgpoint averagepoints(cgpoint a, cgpoint b) { return cgpointmake((a.x + b.x) * 0.5f, (a.y + b.y) * 0.5f); } - (ibaction)tocircle:(id)sender { uibezierpath* p = [[uibezierpath alloc] init]; [p movetopoint: cgpointmake(80, 56)]; [p addcurvetopoint:cgpointmake(144, 120) controlpoint1:cgpointmake(115.34622, 56) controlpoint2:cgpointmake(144, 84.653778)]; [p addcurvetopoint:cgpointmake(135.42563, 152) controlpoint1:cgpointmake(144, 131.23434) controlpoint2:cgpointmake(141.0428, 142.27077)]; [p addcurvetopoint:cgpointmake(48, 175.42563) controlpoint1:cgpointmake(117.75252, 182.61073) controlpoint2:cgpointmake(78.610725, 193.09874)]; [p addcurvetopoint:cgpointmake(24.574375, 152) controlpoint1:cgpointmake(38.270771, 169.80846) controlpoint2:cgpointmake(30.191547, 161.72923)]; [p addcurvetopoint:cgpointmake(47.999996, 64.574379) controlpoint1:cgpointmake(6.9012618, 121.38927) controlpoint2:cgpointmake(17.389269, 82.24749)]; [p addcurvetopoint:cgpointmake(80, 56) controlpoint1:cgpointmake(57.729225, 58.957207) controlpoint2:cgpointmake(68.765656, 56)]; [p closepath]; [catransaction begin]; cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@"path"]; pathanimation.duration = 3.f; pathanimation.fromvalue = (id)shapelayer.path; pathanimation.tovalue = (id)p.cgpath; [shapelayer addanimation:pathanimation forkey:@"path"]; [catransaction setcompletionblock:^{ shapelayer.path = p.cgpath; }]; [catransaction commit]; double delayinseconds = 4.0; dispatch_time_t poptime = dispatch_time(dispatch_time_now, (int64_t)(delayinseconds * nsec_per_sec)); dispatch_after(poptime, dispatch_get_main_queue(), ^(void){ [self totriangle: nil]; }); } - (ibaction)totriangle: (id)sender { uibezierpath* p = [[uibezierpath alloc] init]; // triangle using same number , kind of points... [p movetopoint: cgpointmake(80, 56)]; [p addcurvetopoint: averagepoints(cgpointmake(80, 56), cgpointmake(135.42563, 152)) controlpoint1:cgpointmake(80, 56) controlpoint2:averagepoints(cgpointmake(80, 56), cgpointmake(135.42563, 152))]; [p addcurvetopoint:cgpointmake(135.42563, 152) controlpoint1:averagepoints(cgpointmake(80, 56), cgpointmake(135.42563, 152)) controlpoint2:cgpointmake(135.42563, 152)]; [p addcurvetopoint:averagepoints(cgpointmake(135.42563, 152), cgpointmake(24.574375, 152)) controlpoint1:cgpointmake(135.42563, 152) controlpoint2:averagepoints(cgpointmake(135.42563, 152), cgpointmake(24.574375, 152))]; [p addcurvetopoint:cgpointmake(24.574375, 152) controlpoint1:averagepoints(cgpointmake(135.42563, 152), cgpointmake(24.574375, 152)) controlpoint2:cgpointmake(24.574375, 152)]; [p addcurvetopoint: averagepoints(cgpointmake(24.574375, 152),cgpointmake(80, 56)) controlpoint1:cgpointmake(24.574375, 152) controlpoint2:averagepoints(cgpointmake(24.574375, 152),cgpointmake(80, 56)) ]; [p addcurvetopoint:cgpointmake(80, 56) controlpoint1:averagepoints(cgpointmake(24.574375, 152),cgpointmake(80, 56)) controlpoint2:cgpointmake(80, 56)]; [p closepath]; [catransaction begin]; cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@"path"]; pathanimation.duration = 3.f; pathanimation.fromvalue = (id)shapelayer.path; pathanimation.tovalue = (id)p.cgpath; [shapelayer addanimation:pathanimation forkey:@"path"]; [catransaction setcompletionblock:^{ shapelayer.path = p.cgpath; }]; [catransaction commit]; double delayinseconds = 4.0; dispatch_time_t poptime = dispatch_time(dispatch_time_now, (int64_t)(delayinseconds * nsec_per_sec)); dispatch_after(poptime, dispatch_get_main_queue(), ^(void){ [self tocircle: nil]; }); } even with number of segments , control points being same, animation still looks little wonky , isn't wanted. reason ca seems matching segments , control points one-to-one , linearly interpolating between them points. because relationship between control points , resulting path not linear (cubic in case), interpolating control point positions linearly isn't going result in path moving in linear fashion. if run code, can see transitions, there weird humps in side of triangle circle path had other points in arc.
more generally, it's not going reasonable expect ca magically morph between 2 arbitrary paths in specific way turns out desirable in appearance. going effort hand construct these paths such might have prayer of morphing, still failed thought should.
it might more reasonable achieve desired effects working flattened paths (i.e. paths made of many small straight lines instead of curved path elements). seems non-trivial, since would, again, need both paths have same number of segments, , have construct segments such common points right number of segments along whole path.
in sum: complex problem , naive/free solution coreanimation has provided unlikely want.
Comments
Post a Comment