I have a series of UIViews which I animate along an arc. Each view has a UIPanGestureRecognizer on it which before any animation occurs works as expected.
However after animating the views (with the method below which animates a view's layer) the gestures do not work as expected; in fact it appears as if they work in their original screen positions.
I've tried various things including matching up the views frame and/ or bounds with that on the animated layer and even removing the existing gestures and creating and adding them again (not shown below).
If anyone knows what's going on or can get me on the road to fixing the issue it would be greatly appreciated.
EDIT: iMartin's suggestion to change
pathAnimation.removedOnCompletion = NO;
to
pathAnimation.removedOnCompletion = YES;
and
view.layer.position = ... //
have put me on the way to fixing the issue.
Original Code:
- (void)animateUIViewAlongArc:(UIView*)view clockwise:(BOOL)clockwise duration:(float)duration
{
[UIView animateWithDuration:duration animations:^{
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimationanimationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
pathAnimation.repeatCount = 1;
CGPoint viewCenter = view.objectCenter;
CGMutablePathRef arcPath = CGPathCreateMutable();
CGPathMoveToPoint(arcPath, NULL, viewCenter.x, viewCenter.y);
float angleOfRotation = self.angleIncrement;
if (clockwise == NO)
{
angleOfRotation *= -1.0f;
}
float fullwayAngle = view.angle + angleOfRotation;
CGPoint fullwayPoint = pointOnCircle(self.center, self.radius, fullwayAngle);
CGPathAddRelativeArc(arcPath, NULL, self.center.x, self.center.y, self.radius, view.angle, angleOfRotation);
pathAnimation.path = arcPath;
CGPathRelease(arcPath);
[view.layer addAnimation:pathAnimation forKey:#"arc"];
view.angle = fullwayAngle;
view.objectCenter = fullwayPoint;
} completion:^(BOOL finished){
if (finished)
{
CGRect frame = view.layer.frame;
CGRect bounds = view.layer.bounds;
view.frame = frame;
view.bounds = bounds;
}
}];
}
Did you check the frame of the view/layer after the animation?
I think the problem is, that what you see is not what you get. The layer itself didn't changes its position/frame, but just its presentationLayer did. Presentation layer is what you actualy see onthe screen. You could see this if you remove this line:
pathAnimation.removedOnCompletion = NO; // Delete or set to YES
Setting this to NO caused the presentation layer to be on screen at different position than your view.
What you should do, is to set final position to the layer just before adding the animation to it.
view.layer.position = finalPosition; // You should calculate this
[view.layer addAnimation:pathAnimation forKey:#"arc"];
Related
I'm working on a iOS camera app, and want to create an animation similar to what the default camera app does on capturing an image (not the shutter animation). The captured image seems to drop into the photo viewer located at the bottom left corner of the screen. Any ideas on how to achieve this? I have not tried animating view controllers before, so I'm a bit lost on how to do it.
* EDIT Implementation issues *
So I've learned how to do the animation, and the animation seems to work fine with a test Image but when I use the actual image returned from the AVCapture connection, the animation goes haywire. The image looks distorted (something wrong with the aspect ratio) and the path it follows is opposite to the actual one. This is the code I'm using to animate:
- (void)animateImage:(UIImage*) image {
UIImageView *animator = [[UIImageView alloc]initWithImage:image];
animator.frame = previewView.frame;
animator.contentMode = UIViewContentModeScaleAspectFit;
[self.previewView addSubview:animator];
[CATransaction begin]; {
[CATransaction setCompletionBlock:^{
[animator removeFromSuperview];
}];
// Set up scaling
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds"];
// Set to value to (0,0) rectangle
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(0,0)]];
resizeAnimation.fillMode = kCAFillModeForwards;
resizeAnimation.removedOnCompletion = NO;
// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
//Setting Endpoint of the animation
CGPoint endPoint = CGPointMake( animator.frame.size.width, animator.frame.size.height);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, 0, 0);
// CGPathMoveToPoint(curvedPath, NULL, animator.frame.size.width/2, animator.frame.size.height/2);
// CGPathAddCurveToPoint(curvedPath, NULL, 0,0,0,0, endPoint.x, endPoint.y);
CGPathAddLineToPoint(curvedPath, NULL, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);
CAAnimationGroup *group = [CAAnimationGroup animation];
// group.fillMode = kCAFillModeForwards; // keep the final value after completion of animation
// group.removedOnCompletion = NO; // "
[group setAnimations:[NSArray arrayWithObjects: pathAnimation, resizeAnimation, nil]];
group.duration = 3.0f;
group.delegate = self;
[group setValue:animator forKey:#"imageViewBeingAnimated"];
[animator.layer addAnimation:group forKey:#"cameraAnimation"];
} [CATransaction commit];
}
It seems to work when I take the picture in landscape mode, but not in Portrait . It's something to do with orientation, but I cant figure out what could be wrong..
"previewView" frame is the AVCapture Preview Layer over which I add the UIImage and then scale and move it to a corner.
* Final EDIT *
Fixed using the transform property instead of bounds.size. Similar to the example here:
http://www.verious.com/article/animating-interfaces-with-core-animation-part-3/
Phew!
Really this is quite simple, after the photo is taken, stick the returned UIimage in a UIImageView and then use core animation blocks to resize and animate the frame whilst making the imageview follow a bezierpath down to the photo viewer in the botton left corner.
Let me know if you need any further help with these steps.
I'm trying to animate many bubbles coming out of a machine. I'm using a basic animation to scale the bubbles from a small bubble to a large one and a keyframe animation to send the bubble in a curve across the screen. These are combined into a group animation.
I have read through just about all I can to try to get this to work, but I have the following two problems.
I can't get the scale animation to work together with the keyframe
animation when I try to animate each bubble.
The animation happens to them all at the same time. I'd like to see them animated one
after the other, but they all animate together.
here is the animation code I have.
-(void)EmitBubbles:(UIButton*)bubblename :(CGRect)RectPassed
{
bubblename.hidden = NO;
// Set position and size of each bubble to be at head of bubble machine and size (0,0)
CGPoint point = (RectPassed.origin);
CGRect ButtonFrame;
ButtonFrame = bubblename.bounds;
ButtonFrame.size = CGSizeMake(0, 0);
bubblename.bounds = ButtonFrame;
CGRect OldButtonBounds = bubblename.bounds;
CGRect NewButtonBounds = OldButtonBounds;
NewButtonBounds.size = RectPassed.size;
CGFloat animationDuration = 0.8f;
// Set up scaling
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
resizeAnimation.fillMode = kCAFillModeForwards;
resizeAnimation.duration = animationDuration;
resizeAnimation.fromValue = [NSValue valueWithCGSize:OldButtonBounds.size];
resizeAnimation.toValue = [NSValue valueWithCGSize:NewButtonBounds.size];
// Set Actual bubble size after animation
bubblename.bounds = NewButtonBounds;
// Setup Path
CGPoint MidPoint = CGPointMake(500,50);
CGPoint EndPoint = CGPointMake(RectPassed.origin.x, RectPassed.origin.y);
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, nil, bubblename.bounds.origin.x, bubblename.bounds.origin.y);
CGPoint NewLoc = CGPointMake(745, 200);
CGPathMoveToPoint(curvedPath, NULL, NewLoc.x,NewLoc.y);
CGPathAddCurveToPoint(curvedPath, NULL, 745,200,MidPoint.x,MidPoint.y, EndPoint.x, EndPoint.y);
pathAnimation.path = curvedPath;
// Set Bubble action position after animation
bubblename.layer.position = point;
// Add scale and path to animation group
CAAnimationGroup *group = [CAAnimationGroup animation];
group.removedOnCompletion = YES;
[group setAnimations:[NSArray arrayWithObjects:pathAnimation, resizeAnimation, nil]];
group.duration = animationDuration;
[bubblename.layer addAnimation:group forKey:#"nil"]; //savingAnimation
CGPathRelease(curvedPath);
}
I call the animation for each bubble using
[self EmitBubbles:btnbubble1 :CGRectMake(200, 500, 84, 88)];
[self EmitBubbles:btnbubble2 :CGRectMake(200, 500, 84, 88)];
I have 20 bubbles on screen. The size of the rect passed is the final size I want the bubbles to be.
Can I can get each bubble to animate separately using a scale and keyframe path, without having to write the above code for each bubble?
Thanks
OK. I think I did it.After hours of looking around Stackoverflow and other places I found that to bhave the objects animate one after the other. I had to calculate the time according to the app time. I used.
group.beginTime = CACurrentMediaTime() + AnimationDelay
To stop the animation momentarily appearing at its final position before continuing with the animation. I had to use
group.fillMode = kCAFillModeBackwards;
I am trying to achieve a 3D transition animation where it looks like the first view is the front of a rectangular prism, and then the rectangular prism rotates forward until what was the top of it is now the front of it. I tried working with 3D transforms, but was unable to get it to work. For now I have an effect that uses scale, and it looks similar, but it doesn't have the right perspective effect:
// Add the new view to the view hierarchy
newView.frame = oldView.superview.bounds;
[oldView.superview addSubview:newView];
// Anchor to the top
newView.layer.anchorPoint = CGPointMake(0.5, 0);
newView.center = CGPointMake(newView.superview.bounds.size.width / 2, 0);
// Anchor to the bottom
oldView.layer.anchorPoint = CGPointMake(0.5, 1);
oldView.center = CGPointMake(newView.superview.bounds.size.width / 2, newView.superview.bounds.size.height);
// Animate the scale transform, not linearly in scale, but linearly in the area covered
NSInteger numberOfSteps = floorf(newView.superview.bounds.size.height);
CAKeyframeAnimation *newTransformAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.y"];
newTransformAnimation.duration = 0.4;
NSMutableArray *newValues = [NSMutableArray array];
for (NSInteger step = 0; step <= numberOfSteps; step++) {
[newValues addObject:#((CGFloat)step / numberOfSteps)];
}
newTransformAnimation.values = newValues;
[newView.layer addAnimation:newTransformAnimation forKey:#"scale"];
CAKeyframeAnimation *oldTransformAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale.y"];
oldTransformAnimation.duration = 0.4;
NSMutableArray *oldValues = [NSMutableArray array];
for (NSInteger step = 0; step <= numberOfSteps; step++) {
[oldValues addObject:#((CGFloat)(numberOfSteps - step) / numberOfSteps)];
}
oldTransformAnimation.values = oldValues;
oldView.layer.transform = CATransform3DMakeScale(1, 0, 1);
[oldView.layer addAnimation:oldTransformAnimation forKey:#"scale"];
// Animate opacity
newView.alpha = 0.2;
[UIView
animateWithDuration:0.4
delay:0
options:0
animations:^{
newView.alpha = 1;
oldView.alpha = 0.2;
}
completion:^(BOOL finished) {
// Finally remove the old view from the view hierarchy
[oldView removeFromSuperview];
}];
If I understand correctly, I should be able to change the newTransformAnimation and oldTransformAnimation so that they apply a 3D effect instead of just a scale in the Y dimension. Any ideas?
UPDATE I know there are lots of sample projects all over the Internet that do something similar. I've been working with some of them and I just haven't been able to wrap my head around it. If someone understands this kind of thing and could explain it, that would be really appreciated.
I have a custom CALayer that I am animating using a CAAnimationGroup to follow a path and rotate at a tangent to the path:
// Create the animation path
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
//Setting Endpoint of the animation
CGRect contentBounds = [self contentBounds];
self.boatLayer.bounds = contentBounds;
CGPoint endPoint = CGPointMake(contentBounds.size.width - 150, contentBounds.size.height - 150);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, startPosition.x, startPosition.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, 0, endPoint.x, 0, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
pathAnimation.duration = 10.0;
pathAnimation.rotationMode = kCAAnimationRotateAuto;
pathAnimation.delegate = self;
// Create an animation group of all the animations
CAAnimationGroup *animationGroup = [[[CAAnimationGroup alloc] init] autorelease];
animationGroup.animations = [NSArray arrayWithObjects:pathAnimation, nil];
animationGroup.duration = 10.0;
animationGroup.removedOnCompletion = NO;
// Add the animations group to the layer (this starts the animation at the next refresh cycle)
[testLayer addAnimation:animationGroup forKey:#"animation"];
I need to be able to track the changes to the position and rotation of the layer as it progresses along the path. I have overridden both setPosition and setTransform (calling super setPosition and super setTranform) and then logging their values. Neither of these values appear to be set during the animation.
How can I get the position and rotation updates from within the CALayer class itself as it animates?
Core Animation doesn't work like that
Sorry. That is not how Core Animation work. When you add an animation to a layer it doesn't change the model of that layer. Only the presentation.
When you configure then animation to not remove itself upon completion
yourAnimation.fillMode = kCAFillModeForwards;
tourAnimation.removedOnCompletion = NO;
you are actually causing an inconsistency between what is shown on screen and the model of that layer. If you for instance had a button that you animated like this you would get very surprised/angry by the fact that it "no longer responds to toucher" or even more funny "responds to touches from it's 'old' location".
Semi-solutions
Depending on what and how often you actually need the updates you could either periodically check the value of the presentationLayer during the animation or use a CADisplayLink to run some code when the screen changes.
In another test of Key Frame animation I am combining moving a UIImageView (called theImage) along a bezier path and scaling larger it as it moves, resulting in a 2x larger image at the end of the path. My initial code to do this has these elements in it to kick off the animation:
UIImageView* theImage = ....
float scaleFactor = 2.0;
....
theImage.center = destination;
theImage.transform = CGAffineTransformMakeScale(1.0,1.0);
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(theImage.image.size.height*scaleFactor, theImage.image.size.width*scaleFactor)]];
resizeAnimation.fillMode = kCAFillModeBackwards;
resizeAnimation.removedOnCompletion = NO;
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.path = [jdPath path].CGPath;
pathAnimation.fillMode = kCAFillModeBackwards;
pathAnimation.removedOnCompletion = NO;
CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:pathAnimation, resizeAnimation, nil];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.removedOnCompletion = NO;
group.duration = duration;
group.delegate = self;
[theImage.layer addAnimation:group forKey:#"animateImage"];
Then, when the animation completes I want to retain the image at the larger size, so I implement:
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
theImage.transform = CGAffineTransformMakeScale(scaleFactor,scaleFactor);
}
This all works .. sort of. The problem is that at the end of the animation theImage flickers for a brief moment - just enough to make it look bad. I am guessing that this is the transition at the end of the animation where I set the transform to the new size.
In experimenting with this I tried a slightly different form of the above, but still got the same flicker:
CAKeyframeAnimation *resizeAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
NSValue* startSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSValue* endSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, scaleFactor, scaleFactor, 1.0)];
NSArray* sizeKeys = [NSArray arrayWithObjects:startSizeKey, endSizeKey, nil];
[resizeAnimation setValues:sizeKeys];
....
theImage.transform = CGAffineTransformMakeScale(scaleFactor,scaleFactor);
But when I ended the animation at the same size as the original, there was NO flicker:
CAKeyframeAnimation *resizeAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform"];
NSValue* startSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSValue* middleSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, scaleFactor, scaleFactor, 1.0)];
NSValue* endSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSArray* sizeKeys = [NSArray arrayWithObjects:startSizeKey, middleSizeKey, endSizeKey, nil];
[resizeAnimation setValues:sizeKeys];
....
theImage.transform = CGAffineTransformMakeScale(1.0,1.0);
So my big question is how can I animate this image without the flicker, and end up with a different size at the end of the animation?
Edit March 2nd
My initial tests were with scaling the image up. I just tried scaling it down (IE scaleFactor = 0.4) and the flickering was a lot more visible, and a lot more obvious as to what I am seeing. This was the sequence of events:
Original sized image is painted on the screen at the starting location.
As the image moves along the path it shrinks smoothly.
The fully shrunk image arrives at the end of the path.
The image is then painted at its original size.
The image is finally painted at its shrunken size.
So it seems to be step 4 that is the flickering that I am seeing.
Edit March 22
I have just uploaded to GitHub a demo project that shows off the moving of an object along a bezier path. The code can be found at PathMove
I also wrote about it in my blog at Moving objects along a bezier path in iOS
It can be tricky to animate a view's layer using Core Animation. There are several things that make it confusing:
Setting an animation on a layer doesn't change the layer's properties. Instead, it changes the properties of a “presentation layer” that replaces the original “model layer” on the screen as long as the animation is applied.
Changing a layer's property normally adds an implicit animation to the layer, with the property name as the animation's key. So if you want to explicitly animate a property, you usually want to set the property to its final value, then add an animation whose key is the property name, to override the implicit animation.
A view normally disables implicit animations on its layer. It also mucks around with its layer's properties in other somewhat mysterious ways.
Also, it's confusing that you animate the view's bounds to scale it up, but then switch to a scale transformation at the end.
I think the easiest way to do what you want is to use the UIView animation methods as much as possible, and only bring in Core Animation for the keyframe animation. You can add the keyframe animation to the view's layer after you've let UIView add its own animation, and your keyframe animation will override the animation added by UIView.
This worked for me:
- (IBAction)animate:(id)sender {
UIImageView* theImage = self.imageView;
CGFloat scaleFactor = 2;
NSTimeInterval duration = 1;
UIBezierPath *path = [self animationPathFromStartingPoint:theImage.center];
CGPoint destination = [path currentPoint];
[UIView animateWithDuration:duration animations:^{
// UIView will add animations for both of these changes.
theImage.transform = CGAffineTransformMakeScale(scaleFactor, scaleFactor);
theImage.center = destination;
// Prepare my own keypath animation for the layer position.
// The layer position is the same as the view center.
CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
positionAnimation.path = path.CGPath;
// Copy properties from UIView's animation.
CAAnimation *autoAnimation = [theImage.layer animationForKey:#"position"];
positionAnimation.duration = autoAnimation.duration;
positionAnimation.fillMode = autoAnimation.fillMode;
// Replace UIView's animation with my animation.
[theImage.layer addAnimation:positionAnimation forKey:positionAnimation.keyPath];
}];
}
CAAnimations will flicker at the end if the terminal state was assigned in such a way that it itself created an implicit animation. Keep in mind CAAnimations are temporary adjustments of an object properties for the purposes of visualizing transition. When the animation done, if the layer's state is still the original starting state, that is what is going to be displayed ever so temporarily until you set the final layer state, which you do in your animationDidStop: method.
Furthermore, your animation is adjusting the bounds.size property of your layer, so you should similarly set your final state rather than using the transform adjustment as your final state. You could also use the transform property as the animating property in the animation instead of bounds.size.
To remedy this, immediately after assigning the animation, change the layer's permeant state to your desired terminal state so that when the animation completes there will be no flicker, but do so in such a manner to no trigger an implicit animation before the animation begins. Specifically, in your case you should do this at the end of your animation set up:
UIImageView* theImage = ....
float scaleFactor = 2.0;
....
theImage.center = destination;
theImage.transform = CGAffineTransformMakeScale(1.0,1.0);
CGSize finalSize = CGSizeMake(theImage.image.size.height*scaleFactor, theImage.image.size.width*scaleFactor);
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:#"bounds.size"];
[resizeAnimation setToValue:[NSValue valueWithCGSize:finalSize]];
resizeAnimation.fillMode = kCAFillModeBackwards;
resizeAnimation.removedOnCompletion = NO;
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.path = [jdPath path].CGPath;
pathAnimation.fillMode = kCAFillModeBackwards;
pathAnimation.removedOnCompletion = NO;
CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:pathAnimation, resizeAnimation, nil];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.removedOnCompletion = NO;
group.duration = duration;
group.delegate = self;
[theImage.layer addAnimation:group forKey:#"animateImage"];
[CATransaction begin];
[CATransaction setDisableActions:YES];
theImage.bounds = CGRectMake( theImage.bounds.origin.x, theImage.bounds.origin.y, finalSize.width, finalSize.height );
[CATransaction commit];
and then remove the transform adjustment in your animationDidStop: method.
I was experimenting with some CAAnimations this week and was noticing that there was a flickering at the end of my animations. In particular, I would animation from a circle to a square, while changing the fillColor as well.
Each CAAnimation has a property called removedOnCompletion which defaults to YES. This means that the animation will disappear (i.e. transitions, scales, rotations, etc.) when the animation completes and you'll be left with the original layer.
Since you already have set your removedOnCompletion properties to NO, I would suggest trying to shift your execution of your animations to use CATransactions, instead of delegates and animationDidStop...
[CATransaction begin];
[CATransaction setDisableActions:YES];
[CATransaction setCompletionBlock: ^{ theImage.transform = ...}];
// ... CAAnimation Stuff ... //
[CATransaction commit];
You put the transaction's completion block call before you create your animations, as per:
http://zearfoss.wordpress.com/2011/02/24/core-animation-catransaction-protip/
The following is from one of my methods:
[CATransaction begin];
CABasicAnimation *animation = ...;
animation.fromValue = ...;
animation.toValue = ...;
[CATransaction setCompletionBlock:^ { self.shadowRadius = _shadowRadius; }];
[self addAnimation:animation forKey:#"animateShadowOpacity"];
[CATransaction commit];
And, I constructed this animation and it works fine for me with no glitches at the end:
The setup and trigger are custom methods I have in a window, and i trigger the animation on mousedown.
UIImageView *imgView;
UIBezierPath *animationPath;
-(void)setup {
canvas = (C4View *)self.view;
imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"img256.png"]];
imgView.frame = CGRectMake(0, 0, 128, 128);
imgView.center = CGPointMake(384, 128);
[canvas addSubview:imgView];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
[UIImageView animateWithDuration:2.0f animations:^{
[CATransaction begin];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
pathAnimation.duration = 2.0f;
pathAnimation.calculationMode = kCAAnimationPaced;
animationPath = [UIBezierPath bezierPath];
[animationPath moveToPoint:imgView.center];
[animationPath addLineToPoint:CGPointMake(128, 512)];
[animationPath addLineToPoint:CGPointMake(384, 896)];
pathAnimation.path = animationPath.CGPath;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;
[imgView.layer addAnimation:pathAnimation forKey:#"animatePosition"];
[CATransaction commit];
CGFloat scaleFactor = 2.0f;
CGRect newFrame = imgView.frame;
newFrame.size.width *= scaleFactor;
newFrame.size.height *= scaleFactor;
newFrame.origin = CGPointMake(256, 0);
imgView.frame = newFrame;
imgView.transform = CGAffineTransformRotate(imgView.transform,90.0*M_PI/180);
}];
}