Drawing and Animating with UIView or CALayer?

Question

hello, i am trying to implement a graph which a uiview draws. There are 3 UIViews to animate a left/right slide. The problem is, that i can't cancel the UIView animation. So I replaced the UIViews by CALayer. Now, the question is if CALayer is appicable for this? Is it normal to draw on a CALayer like this? And why is a CALayer so slow when I manipulate the frame properties.

CGRect frame = curve.frame;
frame.origin.x -= diffX;
[curve setFrame:frame];

Is there a alternativ?

P.S. I am a german guy. Sorry for mistakes.

Answer 1

Not sure what you mean by 'slow', but setting the frame of a CALayer in this way uses 'implicit animation'. That is, it will animated the transition from the old frame to the new frame. You can turn this off:

[CATransaction begin];
[CATransaction setValue: (id) kCFBooleanTrue forKey: kCATransactionDisableActions];
[curve setFrame:frame];
[CATransaction commit];

However, this is usually considered an advantage of CALayer. You way want to just use UIViews here, which will not, by default, animate transitions such as this.

Answer 2

Slow like dull. In this case the UIView is better, right, but after the slide, there is a animation to fade the view out. Thanks for your codeexample. That shows me that i can use layer for drawing and animating. First I used UIView but I must cancel the animation if there is a mousedown and that is only possible with CAAnimation or isn't that right?

Thanks Markus

Answer 3

Hello, I got the animation with CATransaction, but now I will animate a x move with CABasicAnimation. That's no problem expect that the position of the layer go back to the previous x.

CABasicAnimation *theAnimation; 
theAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; 
theAnimation.delegate = self;
theAnimation.duration = 1.0;
theAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
CGPoint position = [[curves objectAtIndex:i]position];
position.x = [[curves objectAtIndex:i]position].x - diffX;
[theAnimation setToValue:[NSValue valueWithCGPoint:position]];
[[curves objectAtIndex:i] addAnimation:theAnimation forKey:[NSString stringWithFormat: @"translate.x.%d", index]];

The position changes the position (e.g. xStart = 100, xEnd = 200), but when the animation ends the layer goes back to the beginning x (e.g. x = 100). Is that normal? How can I solve this problem, that the end position doesn't change anymore? I tried to changed the removeOnComplete property but that didn't effect.

Hope for help.

Markus

Answer 4

Instead of setting the destination position in theAnimation, just set the position property of the thing you want to move.

When you addAnimation:theAnimation, you're setting the "visual style" of any changes to the keyPath property you specified.

When you change the position of the object that the animation is attached to, say from (0,0) to (500,500), CoreAnimation will animate the change for you. The theAnimation object doesn't need the start and end positions, since the underlying object has them.