CABasicAnimation not scrolling with rest of View
- by morgman
All, I'm working on reproducing the pulsing Blue circle effect that the map uses to show your own location...
I layered a UIView over a MKMapView. The UIView contains the pulsing animation.
I ended up using the following code gleaned from numerous answers here on stackoverflow:
CABasicAnimation* pulseAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
pulseAnimation.toValue = [NSNumber numberWithFloat: 0.0];
pulseAnimation.duration = 1.0;
pulseAnimation.repeatCount = HUGE_VALF;
pulseAnimation.autoreverses = YES;
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:pulseAnimation forKey:@"pulseAnimation"];
CABasicAnimation* resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
resizeAnimation.toValue = [NSValue valueWithCGSize:CGSizeMake(0.0f, 0.0f)];
resizeAnimation.fillMode = kCAFillModeBoth;
resizeAnimation.duration = 1.0;
resizeAnimation.repeatCount = HUGE_VALF;
resizeAnimation.autoreverses = YES;
resizeAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:resizeAnimation forKey:@"resizeAnimation"];
This does an acceptable job of pulsing/fading a circle I drew in the UIView using:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 0.4);
// And draw with a blue fill color
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.1);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(context, 2.0);
CGContextAddEllipseInRect(context, CGRectMake(x-30, y-30, 60.0, 60.0));
CGContextDrawPath(context, kCGPathFillStroke);
But I soon found that while this appears to work, as soon as I drag the underlying map to another position the animation screws up...
While the position I want highlighted is centered on the screen the animation works ok, once I've dragged the position so it's no longer centered the animation now pulses starting at the center of the screen scaling up to center on the position dragged off center, and back again...
A humorous and cool effect, but not what I was looking for.
I realize I may have been lucky on several fronts.
I'm not sure what I misunderstood.
I think the animation is scaling the entire layer which just happens to have my circle drawn in the middle of it. So it works when centered but not when off center.
I tried the following gleaned from one of the questions suggested by stackoverflow when I started this question:
CABasicAnimation* translateAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
translateAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(oldx, oldy )];
translateAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(x, y )];
// translateAnimation.fillMode = kCAFillModeBoth;
translateAnimation.duration = 1.0;
translateAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.layer addAnimation:translateAnimation forKey:@"translateAnimation"];
But it doesn't help much, when I play with it sometimes it looks like once time it animates in the correct spot after I've moved it offcenter, but then it switches back to the animating from the center point to the new location.
Sooo, any suggestions or do I need to provide additional information.
