objective-cioscore-animationcgaffinetransformscale

iOS view transform animation


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?


Solution

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