6

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:

  1. Original sized image is painted on the screen at the starting location.
  2. As the image moves along the path it shrinks smoothly.
  3. The fully shrunk image arrives at the end of the path.
  4. The image is then painted at its original size.
  5. 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

3 Answers 3

8

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];
    }];
}
6
  • This solution is working the best so far. However (and here comes the "but") I am also trying to fit in a solution to my other animation question (stackoverflow.com/questions/9468707/…). So how would I seamlessly add a pre and post rotation action to this solution? I have tried adding a completion block, but that resulted in the same terminal flickering that I am trying to avoid.
    – Peter M
    Mar 5, 2012 at 15:05
  • Well, you've already awarded the bounty for that problem. Did you not find a satisfactory answer?
    – rob mayoff
    Mar 6, 2012 at 0:17
  • For that other problem I'm going with having to pre/post rotate the image. But that is separate from this problem of trying to bring all the needed animations together in one go. BTW I have no idea why you answer keeps getting marked down. I like it for its simplicity and neatness.
    – Peter M
    Mar 6, 2012 at 1:14
  • I have answered your other question with an expanded version of this code that uses kCAAnimationRotateAuto and explains how to avoid flicker at the start and end of the rotation. I have also put a test project on github.
    – rob mayoff
    Mar 6, 2012 at 9:05
  • Thanks for the effort you put into your answer. I don't what happened to the SO bounty, but I think I may have got back to this question too late, so apparently all I can do is just award you the answer now :-( .
    – Peter M
    Mar 10, 2012 at 16:54
4

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.

6
  • What you say makes sense, but when I added the code that you suggested I don't get the desired result. What happens is that image now starts off as the scaled up version .. grows even bigger .. and then reverts to the expected size of scaled up image. But no flickering!!! BTW when you say "remove the transform adjustment" I believe you meant to delete the theImage.transform = CGAffineTransformMakeScale(scaleFactor,scaleFactor); line from the animationDidStop: method. Removing a transform could be read as inverting what was previously done :D
    – Peter M
    Mar 3, 2012 at 17:29
  • Wait, I get it. I didn't look at your code closely. You are not using the transform property in the animation. You should not be using it at the final state either. I'll edit my answer to compensation for that.
    – kamprath
    Mar 3, 2012 at 19:29
  • One slight problem with theImage.bounds.size = finalSize . XCode reports that Expression is not assignable.
    – Peter M
    Mar 4, 2012 at 15:19
  • fixed. Sorry, always forget that when free form coding on stackoverflow (no compiler and autocomplete).
    – kamprath
    Mar 5, 2012 at 2:25
  • With this I am getting the image starting off at the final size.
    – Peter M
    Mar 5, 2012 at 14:16
4

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);

    }];
}
6
  • As per my code above, my animations already have removedOnCompletion set to NO for each individual animation as well as the overall group. Yet these animations don't seem to be retained. If I don't do the transform in animationDidStop: then I am left with the original image being displayed.
    – Peter M
    Mar 3, 2012 at 13:43
  • Yes, sorry I missed that removedOnCompletion (was late last night)... I edited my answer above to include another technique... Mar 3, 2012 at 19:19
  • Do you mean inserting [theImage.layer addAnimation:group forKey:@"animateImage"]; into the spot where you say CAAnimation Stuff ?
    – Peter M
    Mar 4, 2012 at 16:24
  • Yeah, give that a shot. I have been working with transactions and animations this week, and they have been simple, so I have constructed these animations within the begin and commit calls to CATransaction. I've edited the answer above to show you how I created one of my transactions. Mar 5, 2012 at 0:16
  • This is still giving me flickering at the end.
    – Peter M
    Mar 5, 2012 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.