IOS view conversion animation

Question

I probably missed something simple, but tried to make a simple Ken Burns effect with an image.

First 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 on the normal scale and expand it to 120% of the size for more than 20 seconds. In fact, what happens is that it starts immediately smaller than its normal size, and then expands to its normal size.

If I use the inverse of the scale, it starts to increase and then scales to a normal scale, which is the opposite of the effect I want.

Any ideas?

Answer 1

Well, it really 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

It seems that the view is redistributed according to its parental view in response to a change in the transformation, reducing its scale to the final result of the transformation, as soon as the transformation 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 a layer.

Answer 3

Try to run the current conversion form of your image?

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