Swift - UI按钮阴影渐变

Question

我正在尝试用Swift重新创建这样的按钮： 我已经成功地从Sketch中准确地创建了按钮内部的渐变色，参考自以下链接：Answered Question 现在我想要重现按钮后面的发光效果。我打算在其后创建一个子视图，并使用高斯模糊滤镜来绘制它。现在我卡在如何实现这一点上，还没有找到好的解决方案。正常的CALayer阴影不能与渐变色配合使用，让我感到困惑。任何帮助都将不胜感激。

- surfaspen

Answer 1

您可以像这样操作：

初始化渐变层

let gradientLayer = CAGradientLayer.init()

gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.yellow.cgColor,
                        UIColor.green.cgColor,
                        UIColor.blue.cgColor]

gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

从按钮的框架中设置首选大小为40。

gradientLayer.frame = CGRect.init(
x: button.frame.minX - 40,
y: button.frame.minY - 40, 
width: button.frame.width + 80, 
height: button.frame.height + 80)
gradientLayer.masksToBounds = true

初始化阴影层

let shadowLayer = CALayer.init()
shadowLayer.frame = gradientLayer.bounds
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOpacity = 0.08
shadowLayer.shadowRadius = 20
shadowLayer.shadowPath = CGPath.init(rect: shadowLayer.bounds, transform: nil)

将阴影层设置为渐变层的蒙版

gradientLayer.mask = shadowLayer

在按钮的父视图中，在按钮的图层下方插入渐变图层。

backgroungView.layer.insertSublayer(gradientLayer, below: button.layer)

- Vitaly Migunov

---

是的，它可以工作，但唯一的问题是当按下按钮时，阴影层会变得更加暗淡，而当用户不断按压时，阴影层最终会变成与渐变层相同。 - surfaspen

这不应该这样工作，你把这个图层放在哪里了？ 这个图层不应该在按钮内部。 - Vitaly Migunov

我将这个图层放在一个扩展到UIButton的函数中。扩展有一个函数来创建渐变，然后创建它后面的阴影层。这个扩展中的函数被调用在按钮的'layoutSubviews()'函数中。 - surfaspen

你的问题在于每次按下按钮时都会创建一个新的图层，因为你从layoutSubviews调用了你的代码。 - Vitaly Migunov

让我们在聊天中继续这个讨论。 - Vitaly Migunov