Can I animate the UIScrollView contentOffset property via its layer?

horseshoe7 picture horseshoe7 · Jun 30, 2011 · Viewed 20.3k times · Source

I want to zoom and scroll a UIScrollView with a CGPathRef. Because of that I assume I have to animate the UIScrollView's layer property? But which property would I animate that would make it equivalent to doing a UIView animation and setting its contentOffset property and zoomScale ?

These are not properties of a CALayer.

Any ideas as to how I would approach this? Again, just want to move the scrollview to a certain contentOffset and zoomScale, but not necessarily linearly from point A to point B, zoom A to zoom B, respectively.

I was thinking a CAKeyFrameAnimation with a CGPathRef, but I don't know which properties to animate.

Answer

pt2ph8 picture pt2ph8 · Jan 5, 2012

You have to animate the bounds property. In fact, that's what the contentOffset property uses behind the scenes.

Example:

CGRect bounds = scrollView.bounds;

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
animation.duration = 1.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

animation.fromValue = [NSValue valueWithCGRect:bounds];

bounds.origin.x += 200;

animation.toValue = [NSValue valueWithCGRect:bounds];

[scrollView.layer addAnimation:animation forKey:@"bounds"];

scrollView.bounds = bounds;

If you're curious, the way I used to get this information is the following:

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];

[scrollView setContentOffset:CGPointMake(200, 0) animated:NO];

[UIView commitAnimations];

NSLog(@"%@",scrollView);

The NSLog call will output:

<UIScrollView: 0x860ba20; frame = (-65.5 0; 451 367); clipsToBounds = YES; autoresize = W+RM+TM+H; animations = { bounds=<CABasicAnimation: 0xec1e7c0>; }; layer = <CALayer: 0x860bbc0>; contentOffset: {246, 0}>

The animations snippet will list all the active animations, in this case { bounds=<CABasicAnimation: 0xec1e7c0>; }.

Hope this helps.