给你的UIView添加个炫彩边框

先上图

产品需要给我们的活动图标加个“醒目”边框, 嘴上的功夫服不了, 只能做了,

没想到这玩意还没那么简单.

---

说下思路:

创建一个View -> 给View加个边框 -> 给边框加点颜色 -> 让边框转起来

好了,开始码:

简单创建一个View,不必多说:

let frame = CGRect(x: 100, y: 200, width: 200, height: 400)

        cornerView = UIView(frame: frame)

        cornerView?.layer.cornerRadius = 10

        cornerView?.backgroundColor = UIColor.systemYellow

        self.view.addSubview(cornerView!)

要添加一个边框, layer.border 没有渐变色, 也不能独立转动, 所以使用贝塞尔曲线创建边框路径

let path = UIBezierPath.init(roundedRect: cornerView!.bounds, cornerRadius: 10)

使用 CAShapeLayer 来绘制这个边框

let shapeLayer = CAShapeLayer()

        shapeLayer.frame = cornerView!.bounds

        shapeLayer.lineWidth = 5

        shapeLayer.fillColor = nil

        shapeLayer.strokeColor = UIColor.black.cgColor

        shapeLayer.path = path.cgPath

接下来让咱的黑白变成彩色, 很容易想到 CAGradientLayer,  咱常用的CAGradientLayer是

这种:axial

 

还有这种:radial

但是我们需要用的 conic, 

只有iOS12 以上才能支持.

不过需要支持12 以下也不用担心,逛下全球最大同性交友平台Github, 找到AngleGradientLayer, 也能满足咱,

demo 我就直接用 CAGradientLayer

GradientLayer需要完全覆盖我们的View,且center跟view Center 重合, 稍微计算一下

        let d = sqrt(frame.width * frame.width + frame.height * frame.height)
        let gLayer = CAGradientLayer()
        gLayer.frame = CGRect(x: -(d - frame.width)/2, y: -(d - frame.height)/2, width: d, height: d)

这里 colors 开始颜色跟结束颜色一样,避免出现开始点和结束点颜色不渐变的情况

        gLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.green.cgColor,UIColor.red.cgColor]
        gLayer.locations = [0.0, 0.3, 0.6, 0.9]
        gLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
        gLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        gLayer.type = .conic

接下来保留 gLayer 边框,  因为  gLayer 要旋转,需给它加个容器, 组合下就成下面的样子

   let pLayer = CALayer()
        pLayer.frame = cornerView!.bounds
        pLayer.addSublayer(gLayer)
        pLayer.mask = shapeLayer
        cornerView!.layer.addSublayer(pLayer)

好了,只剩下最后一步 让我们的 边框流动起来

let animate = CABasicAnimation.init(keyPath: "transform.rotation.z")
        animate.toValue = Double.pi * 2
        animate.duration = 1
        animate.repeatCount = Float(INT_MAX)
        gLayer.add(animate, forKey: nil)

ok.完成

附上仓库地址