Search code examples
objective-ccore-animation

How to synchronise animations with CAScrollLayer animation


I have a table-like scrollable view with sections. The layout structure is on the right picture. enter image description here

The view has a scroll layer that has sections. Each section has a title and rows. When I scroll up I need the section title stay visible above the rows just like in normal UITableView. enter image description here

When I scroll the layer I pass the scroll position to the section, so it can adjust position of the title. In the view:

- (void)updateContentVerticalScrollPosition
{
    [CATransaction begin];
    [_scrollableContentLayer scrollToRect:scrollRect];
    [_section setVerticallScrollPositionInSuperlayer:_verticalScrollPosition];
    [CATransaction commit];
}

In the section I update the position of the title:

_titleLayer.position = CGPointMake(0, titleLayerVerticalPosition);

It works, but even though I use a transaction the scroll layer and the title move with different speed. So, it looks like the title layer is floating.

Does anyone know how to synchronise animations of the scroll layer and the title layer?


Solution

  • I have found the solution. NSScrollLayer does not use the default timing function to animate the scrolling, but a linear one. So, all we need is to change the action for @"position" key.

    CABasicAnimation* animation = [[CABasicAnimation alloc] init];
    animation.duration = 0.25;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];       
    [_titleLayer setActions:[NSDictionary dictionaryWithObject:animation forKey:@"position"]];
    [animation release];