如何使用 UIScrollView 创建顶部淡入淡出效果? [英] How to create a top fade effect using UIScrollView?

问题描述

我的应用中有一个 UIScrollView，并且我在其他一些应用中看到，当用户滚动时，顶部会在滚动时淡出，而不仅仅是消失.

我真的很喜欢这个效果并且想要实现它.有什么想法可以做到吗?

解决方案

简单的2020解决方案:

导入 UIKit类 FadeTail: UIIView {私有惰性 var gradientLayer: CAGradientLayer = {让 l = CAGradientLayer()l.startPoint = CGPoint(x: 0.5, y: 0)l.endPoint = CGPoint(x: 0.5, y: 1)让 baseColor = UIColor.white//例如l.colors = [baseColor.withAlphaComponent(0),baseColor.withAlphaComponent(1),].map{$0.cgColor}layer.addSublayer(l)返回 l}()覆盖 func layoutSubviews() {super.layoutSubviews()gradientLayer.frame = 边界}}

简单

• 在情节提要中自动布局该视图，
• 任何您想要的形状或大小
• 在您希望淡出的视图(文本、图像、网络视图、任何内容)之上.

简单.

提示 - 渐变、圆圈等

如果您需要疯狂的圆形/带状/等渐变，请使用此处的技术:

I've got a UIScrollView in my app and I have seen in some other apps that when the user scrolls, the top section fades out on scroll rather than just dissapearing out.

I really love this effect and want to achieve it. Any ideas how it can be done?

解决方案

Simple 2020 solution:

import UIKit

class FadeTail: UIIView {
    
    private lazy var gradientLayer: CAGradientLayer = {
        let l = CAGradientLayer()
        l.startPoint = CGPoint(x: 0.5, y: 0)
        l.endPoint = CGPoint(x: 0.5, y: 1)
        let baseColor = UIColor.white // for example
        l.colors = [
            baseColor.withAlphaComponent(0),
            baseColor.withAlphaComponent(1),
        ].map{$0.cgColor}
        layer.addSublayer(l)
        return l
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }
}

Simply

• autolayout that view in storyboard,
• any shape or size you wish
• on top of the view (text, image, webview, anything) you wish to be faded.

Easy.

Tip - gradients, circles, etc

If you need crazy circular/banded/etc fades, use the techniques here: https://stackoverflow.com/a/61174086/294884

这篇关于如何使用 UIScrollView 创建顶部淡入淡出效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！