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?

Holmquist

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

Holmquist

Accept your own answer pls ;) – Rickirickie

Answer 2

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.

Suffice

Answer 3

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

Krasner

I did try using the additive CG functions to the identity transform, but that didn't work either. There's something subtle going on, just haven't figured it out. Using CATransform3D (starting with the identity transform) on the layer resulted in the same exact problem. – Holmquist