iOS view transform animation

David Goodine picture David Goodine · Dec 6, 2012 · Viewed 14.8k times · Source

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

David Goodine picture David Goodine · Dec 6, 2012

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"];