How do I make a UIImage fade in and fade out as I scroll?

我的梦境 提交于 2019-12-11 05:06:00

问题


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
    }

回答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.)




回答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.



来源:https://stackoverflow.com/questions/30114746/how-do-i-make-a-uiimage-fade-in-and-fade-out-as-i-scroll

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!