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

Posted 2023-03-16

【中文标题】如何在滚动时使 UIImage 淡入淡出？

【英文标题】：How do I make a UIImage fade in and fade out as I scroll?

【发布时间】：2015-05-08 02:16:43

【问题描述】：

我按照本教程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
            
        

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

更新：我设法做了与我想要的完全相反的事情：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
    

【问题讨论】：

self.view.alpha = ...

@NorthBlast 已经在 else 条件下这样做了，但过渡并不顺利:(

使用 UIView 动画..

【参考方案1】：

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

【参考方案2】：

将两个 UIImageView 叠放在一起（在本例中，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;

“左”和“右”整数对应于数组中的索引。有一行检查滚动视图不能意外地“太右”，即试图在数组边界之外找到一个索引。

然后我从一个名为 events 的数组中提取数据，并检查结果字典中是否存在图像（但您可以将它用于直接向上的图像数组），更新两个 UIImageview，然后淡化一个根据滚动的内容偏移，在顶部（bgB）进出。

“动画”与用户交互相关，这很好，但有时将动画块与另一个滚动视图委托方法一起使用会更好。