当我滚动时，如何使UIImage淡入淡出？

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:

我按照本教程http://blog.matthewcheok.com/design-teardown-stretchy-headers/制作了一个弹性标题。无论如何它的工作完美但我无法在它上面制作UIView,因为视图拉伸并返回到原始alpha,因为视图恢复正常。我能想出的最好的是:

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?

但它几乎没有用。 alpha之间没有平滑过渡,当视图恢复正常时,alpha不会返回。有什么建议或提示吗?

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

更新:我设法与我想要的完全相反:p这是代码:

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
    }

2 个解决方案

#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.)

看一下UIScrollViewDelegate协议。有许多消息与开始和结束拖动和减速有关。您应该能够将视图控制器设置为滚动视图的委托并实现其中一些方法。我会创建一个UIView动画,在滚动开始时动画显示标题的alpha,以及另一个UIView动画,一旦滚动结束(或者可能一旦减速结束),它就会将其动画回不透明状态。

#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:

将两个UIImageViews相互叠加(在本例中,bg位于bgB下),然后将UIScrollview布置在最顶层。在scrollviewDidScroll方法中,放置以下代码:

     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.

'left'和'right'整数对应于数组中的索引。有一行检查滚动视图不会意外地“过于正确”,即试图找到数组边界之外的索引。

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.

然后我从一个名为events的数组中提取数据,并检查结果字典中是否存在图像(但是你可以将它用于一个直接的图像数组),更新两个UIImageviews然后在顶部褪色( bgB)输入和输出取决于滚动的内容偏移量。

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

“动画”与用户交互相关,这很好,但有时最好将动画块与另一个scrollview委托方法一起使用。

#1

#2