Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIImageView is disappearing after CAKeyframeAnimation

I'm trying this code (found in an answer here on SO) in a category on UIView and am using it to peform a "pop" animation on a UIImageView nested inside of a UITableViewCell.

- (void)attachPopUpAnimation
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation
       animationWithKeyPath:@"transform"];

    CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
    CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1);
    CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
    CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);

    NSArray *frameValues = [NSArray arrayWithObjects:
       [NSValue valueWithCATransform3D:scale1],
       [NSValue valueWithCATransform3D:scale2],
       [NSValue valueWithCATransform3D:scale3],
       [NSValue valueWithCATransform3D:scale4],
       nil];
    [animation setValues:frameValues];

    NSArray *frameTimes = [NSArray arrayWithObjects:
         [NSNumber numberWithFloat:0.0],
         [NSNumber numberWithFloat:0.5],
         [NSNumber numberWithFloat:0.9],
         [NSNumber numberWithFloat:1.0],
         nil];    
    [animation setKeyTimes:frameTimes];

    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    animation.duration = 0.2;

    [self.layer addAnimation:animation forKey:@"popup"];
}

The animation works properly, but when it finishes, it disappears. I've found answers to others with this problem, but apparently setting the fillMode will not work in this instance.

like image 785
Mark Adams Avatar asked Dec 23 '22 00:12

Mark Adams


1 Answers

Don't use those two lines. Instead actually set the transform on the layer. Replace these two lines:

animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;

with the final transform state:

[[self layer] setTransform:scale4];

When setting fill mode forwards and not removing the animation, it is causing the final state to be visual only. You need to actually change the layer's internal state for the property you're animating. To do so, override the animation for the transform property by using the transform name when adding the animation to the layer. This will cause the animation to use your animation instead of the default.

[[self layer] addAnimation:animation forKey:@"transform"];
like image 153
Matt Long Avatar answered Jan 05 '23 03:01

Matt Long