问题描述
我的应用中有一个 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