如何在滚动时使UIImage淡入和淡出？

Question

I have a stretchy header that I made following this tutorial http://blog.matthewcheok.com/design-teardown-stretchy-headers/ . Anyway it's working perfectly but I'm having trouble making a UIView on top of it fade out as the view stretched and returning to original alpha as the view is returned to normal. Best I could come up with is this:

override func 

    scrollViewDidScroll(scrollView: UIScrollView) {
            updateHeaderView()
            var offset = scrollView.contentOffset.y
            if offset < -170 {

                headerBlurImageView?.alpha = max(0.0, offset - 95/35)
            } else {
            self.headerBlurImageView?.alpha = 1
            }
        }

But it barely works. There is no smooth transition between the alphas and when the view is returned to normal the alpha doesn't return. Any advice or hints?

Update: I managed to do the exact opposite of what I wanted :p Here's the code:

override func scrollViewDidScroll(scrollView: UIScrollView) {
        updateHeaderView()
        var height: CGFloat
        var position: CGFloat
        var percent: CGFloat

        height = scrollView.bounds.size.height/2
        position = max(-scrollView.contentOffset.y, 0.0)
        percent = min(position / height, 1.0)
        self.headerBlurImageView.alpha = percent
    }

Answer 1

Take a look at the UIScrollViewDelegate protocol. there are a number of messages that relate to starting and ending dragging, and decelerating. You should be able to set your view controller up as the scroll view's delegate and implement some of those methods. I'd create a UIView animation that animates the header's alpha down when scrolling begins, and another UIView animation that animates it back to opaque once scrolling ends (or possibly once deceleration ends.)

Answer 2

Layout two UIImageViews on top of one another (in this example, bg is under bgB), then layout the UIScrollview at the very top. In the scrollviewDidScroll method, place the following code:

     float off = cv.contentOffset.x;
     float floatedIndex = off/cv.frame.size.width;
     int left = floatedIndex;
     int right = ceil(floatedIndex);
     if (right>events.count-1){ right=events.count-1; }
     float alpha = floatedIndex-left;

     UIImage * leftImage = nil;
     UIImage * rightImage = nil;
     NSDictionary * ld = events[left];
     NSDictionary * rd = events[right];
     NSObject * o = ld[@"artwork"];
     if ([o isKindOfClass:[UIImage class]]){
     leftImage = ld[@"artwork"];
     }
     o = rd[@"artwork"];
     if ([o isKindOfClass:[UIImage class]]){
     rightImage = rd[@"artwork"];
     }

     bg.image = leftImage;
     bgB.image = rightImage;
     bgB.alpha = alpha;

The 'left' and 'right' ints correspond to indices in an array. There's a line checking that the scrollview cannot accidently go 'too far right' ie trying to find an index outside the bounds of the array.

Then I'm pulling data from an array called events, and checking for the existence of an image in the resulting dictionary (but you could use it for a straight up array of images), updating both UIImageviews and then fading the one on top (bgB) in and out depending on the scroll's content offset.

The 'animation' correlates with user-interaction, which is great, but sometimes it's better to use animation blocks with another scrollview delegate method.