CABasicAnimation CGRect enlarging not working

Question

I am trying to use a CABasicAnimation in order to make a view larger and then smaller, using the autoreverse. I have QuartzCore imported. I am using the code below:

    CABasicAnimation *enlarge = [CABasicAnimation animationWithKeyPath:@"enlargeKeyPath"];
    CGRect currentSize = CGRectMake(20, 27, _moveView.bounds.size.width, _moveView.bounds.size.height);
    CGRect newSize = CGRectMake(20, 27, 45, 46);
    enlarge.fromValue = [NSValue valueWithCGRect:currentSize];
    enlarge.toValue = [NSValue valueWithCGRect:newSize];
    enlarge.autoreverses = YES;
    enlarge.repeatCount = 3.0;
    enlarge.duration = 0.5;
    [_moveView.layer addAnimation:enlarge forKey:@"enlargeKeyPath"];

However, that code does not work. Could someone help?

I feel like something is wrong with the keys for the animationWithKeyPath at the beginning and the forKey and the end. I don't know what those are used for. Could somebody help? Thanks!

Answer 1

Instead of "enlargeKeyPath", what we need here is actually transform.scale; as a result, we would animate the scaling as follows:

CABasicAnimation *enlarge = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
enlarge.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(3.0f, 3.0f, 1.0f)];
//To value is the value we wish your view to be scaled up (or down) to.
enlarge.autoreverses = YES;
enlarge.repeatCount = 3.0;
enlarge.duration = 0.5;
[_moveView.layer addAnimation:enlarge forKey:@"enlargeKeyPath"];

If you really would like to scale on the frame, we should use the keyPath bounds instead of frame as mentioned.

Thus, your code would be:

CABasicAnimation *enlarge = [CABasicAnimation animationWithKeyPath:@"bounds"];
CGRect currentSize = CGRectMake(20, 27, _moveView.bounds.size.width, _moveView.bounds.size.height);
CGRect newSize = CGRectMake(20, 27, 45, 46);
enlarge.toValue = [NSValue valueWithCGRect:newSize];
enlarge.autoreverses = YES;
enlarge.repeatCount = 3.0;
enlarge.duration = 0.5;
[_moveView.layer addAnimation:enlarge forKey:@"enlargeKeyPath"];

For other values of keyPath that you could use, please refer to the documentation here.