Animating Frame with CoreAnimation

Question

I'm trying to animate position of some subviews in a scrollview. I want to create a specific effect as they slide in. I was just using implicit animation by changing the frame on UIView but when they slide in it looks too robotic. So I was hoping to create a bounce effect where they slide in, go a bit to far, and then go back to their intended position, pretty much to how a scrollview looks when it reaches an end, just sort of the opposite.

Anyways, I can't get it to animate changing the frame's origin. I'm not sure what I'm missing, because if I switch out what is being animated (make the first //* to /*) it works just fine changing the opacity.

- (void)slideInStories;
{
    float scrollViewContentWidth = 0;

    for (StoryViewController *storyController in storyControllers) {
        NSMutableArray *animationPoints = [NSMutableArray array];
        CGRect viewFrame = storyController.view.frame; 

        //*
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"frame"];
        [animationPoints addObject:[NSValue valueWithCGRect:viewFrame]];

        viewFrame.origin.x = scrollViewContentWidth - 10;
        [animationPoints addObject:[NSValue valueWithCGRect:viewFrame]];

        viewFrame.origin.x = scrollViewContentWidth;
        [animationPoints addObject:[NSValue valueWithCGRect:viewFrame]];
        /*/
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
        [animationPoints addObject:[NSNumber numberWithFloat:0.75]];
        [animationPoints addObject:[NSNumber numberWithFloat:0.0]];
        [animationPoints addObject:[NSNumber numberWithFloat:0.75]];
        //*/

        [animation setValues:animationPoints];

        [animation setDuration:4.0];

        viewFrame.origin.x = scrollViewContentWidth;
        scrollViewContentWidth += viewFrame.size.width;
        [storyController.view.layer setFrame:viewFrame];
        [storyController.view.layer setOpacity:1.0];
        [storyController.view.layer addAnimation:animation forKey:nil];
    }

    [scrollView setContentSize:CGSizeMake(scrollViewContentWidth, 187.0f)];
}

Have you tried, just for kicks, animating the `center` instead? — jscs, May 18 '11 at 06:14

score 5 · Accepted Answer · edited Jun 28 '17 at 14:32

5

You cannot animate the frame of a CALayer.

edited Jun 28 '17 at 14:32

Matt

74,352
26
153
180

answered May 18 '11 at 11:49

Daniel Burke

371
1
4

Thanks, this was driving me crazy! – dustins May 18 '11 at 12:27
1

I knew I had seen that somewhere, but the [class reference](http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/UIView/UIView.html#//apple_ref/doc/uid/TP40006816-CH3-SW5) says that it _is_ animatable! A doc bug? – jscs May 18 '11 at 18:28
@JoshCaswell You've linked to the frame property of UIView. I don't know whether it is or isn't animatable. However in @dustins posted code, he specifically adds the animation to the layer. Perhaps he should also be using the block based animation methods on UIView? I haven't used Core Animation directly on UIView objects, so I couldn't say for sure. – Daniel Burke May 18 '11 at 23:31
Animating the layer, not the view -- you've got it. Thanks for pointing out the mistake. – jscs May 18 '11 at 23:50

Animating Frame with CoreAnimation

1 Answers1