'Background alpha transition while scrolling

In a page I am using a scroll view to show two views. For scrolling to each view I have to change the Background alpha in different manner (Or I have to show different images).

How to do a transition effect from one image to second at the time of scrolling itself ?

I want exactly same as in twitter iPhone app profile page top scrollview transition.

iosiphoneobjective-canimationuiscrollview


Solution 1:[1]

You are going to have to set some object as the UIScrollViewDelegate and then overload the function scrollViewDidScroll:. Then you can get the current offset of the scrollview and set whatever variables in the UI however you wish.

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //(Whatever you want to do here based off of scrollView.contentOffset)
}

Alternatively, you could use the scrollviewDidEndScrolling function in the same delegate, but that will not give you real time alpha blending or background changes. It will only fire when the scrollview stops moving.

Solution 2:[2]

Change the background color or the alpha of the UIView like this:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat alpha = scrollView.contentOffset.x/320*0.8 ; // 0.8 is the maximum alpha allowed /
    self.myView.backgroundColor = RGBACOLOR(0, 0, 0, alpha);
    //self.myView.alpha = alpha;
}

Solution 3:[3]

If you want to change the background while scrollview is scrolling then you should override below two functions:

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;
-(void)scrollViewWillEndDecelerating:(UIScrollView *)scrollView;

Solution 4:[4]

I hope I am not too late with the answer :P

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
    //update images alpha and indicator
    let xPosition = scrollView.contentOffset.x
    let width = scrollView.contentSize.width
    let pageWidth = width / 3
    
    imageViewPage1.alpha = min(1, max(0, 1 - xPosition/pageWidth))
    imageViewPage2.alpha = min(1, max(0, 1 - abs((xPosition-pageWidth)/pageWidth)))
    imageViewPage3.alpha = min(1, max(0, 1 - abs((xPosition-pageWidth*2)/pageWidth)))
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Putz1103
Solution 2 Damien Romito
Solution 3 Apurv
Solution 4 Kamen Dobrev

Related Questions