先上图
产品需要给我们的活动图标加个“醒目”边框, 嘴上的功夫服不了, 只能做了,
没想到这玩意还没那么简单.
说下思路:
创建一个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.完成
附上仓库地址