iOS view transform animation

Question

I'm probably missing something simple, but trying to do a simple "Ken Burns Effect" with an image view.

First the code:

[UIView animateWithDuration:20
                      delay:2
                    options:UIViewAnimationCurveLinear
                 animations:^{
                   CGAffineTransform move = CGAffineTransformMakeTranslation(40, 40);
                   CGAffineTransform zoom    = CGAffineTransformMakeScale(1.2, 1.2);
                   CGAffineTransform transform = CGAffineTransformConcat(zoom, move);
                   self.imageView.transform = transform;
                 }
                 completion:^(BOOL finished){
                   NSLog(@"Done");
                 }];

I expected this to start with the image view at normal scale and expand it to 120% of the size over 20 seconds. What actually happens is that it starts out immediately smaller than normal size, then expands to normal size.

If I use the reciprocal of the scale value, it starts out zoomed in and then zooms out to normal scale which is the opposite of the effect I want.

Any ideas?

Answer 1

Ok, this actually worked and does what I want.

CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.duration = 20.0;
transformAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transformAnimation.removedOnCompletion = NO;
transformAnimation.fillMode = kCAFillModeForwards;

CATransform3D xform = CATransform3DIdentity;
xform = CATransform3DScale(xform, 1.2, 1.2, 1.0);
xform = CATransform3DTranslate(xform, 60, -60, 0);
transformAnimation.toValue = [NSValue valueWithCATransform3D:xform];
[self.imageView.layer addAnimation:transformAnimation forKey:@"transformAnimation"];

Answer 2

Have you try starting form the current transform of your imageView ?

[UIView animateWithDuration:20
                      delay:2
                    options:UIViewAnimationCurveLinear
                 animations:^{
                   CGAffineTransform trans = self.imageView.transform;
                   CGAffineTransformTranslate(trans, 40, 40);
                   CGAffineTransformScale(trans, 1.2, 1.2);
                   self.imageView.transform = trans;
                 }
                 completion:^(BOOL finished){
                   NSLog(@"Done");
                 }];

Answer 3

It sounds like the view is being re-laid out by its parent view in response to the change in transform, casing it to be scaled down to the end result of the transform as soon as the transform is set in the animation block. The key is that your first attempt makes changes directly to the view, while the second approach works with the layer.