Moving CALayer's mask on scroll in a Scrollview

Question

I am experimenting with iOS SDK and I have the following UIView structure:

• UIView
  • UIImageView - only a background image
  • UIImageView (with a CALayer mask)
  • UIScrollView
    • Label

Very simple structure, UIScrollView is transparent layer and second UIImageView has a mask on it. What I am trying to do is that CALayer mask would move its position according to position of the Content in the scroll view. If user scrolls, mask's position should be updated. I already solved this problem by using UIScrollView's delegate:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGPoint contentOffset = scrollView.contentOffset;
    contentOffset.y = -contentOffset.y;
    
    self.overlayImageView.viewlayer.mask.position = contentOffset;
}

Mask is created in viewDidLoad and does not change during view controller's lifecycle.

The problem is that the mask position updating is too slow. That way it looks the mask is following the scroll view's content, not scrolling with it. The scrollViewDidScroll delegate method is called correctly.

For you to better understand the problem, I am attaching a video I made in iOS simulator. http://www.youtube.com/watch?v=w3xRl3LTngY

So the question is:

Is there a way to make mask updating faster or this is the limit of iOS?

Gamboge

Answer 1

CALayer are implicit animated for some properties like position try to disable them:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{

[CATransaction begin];
    [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
CGPoint contentOffset = scrollView.contentOffset;
contentOffset.y = -contentOffset.y;

self.overlayImageView.viewlayer.mask.position = contentOffset;
[CATransaction commit];

}

Sculptor

Great, fixes the problem. Thank you very much. Mask position changes are much more fluid now. – Gamboge

Answer 2

For me solution was as following:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        CATransaction.begin()
        CATransaction.setDisableActions(true)
        layerGradient?.frame = scrollView.safeAreaLayoutGuide.layoutFrame
        CATransaction.commit()
}

Alasteir