ios - 如何绘制另一层六边形UIBezier Path并进行相应的动画处理
问题描述
我正在寻找一种方法来添加另一层六边形贝塞尔路径,如下所示。
我已经能够使用贝塞尔路径创建六边形并相应地制作动画,但我正在尝试添加另一个贝塞尔路径的灰色层。我尝试添加多个贝塞尔路径,但它不起作用。
这是我实现的输出。
这是我的LoaderView
课
class LoaderView: UIView {
private let lineWidth : CGFloat = 5
internal var backgroundMask = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
setUpLayers()
createAnimation()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpLayers()
createAnimation()
}
func setUpLayers()
{
backgroundMask.lineWidth = lineWidth
backgroundMask.fillColor = nil
backgroundMask.strokeColor = UIColor.blue.cgColor
layer.mask = backgroundMask
layer.addSublayer(backgroundMask)
}
func createAnimation()
{
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.fromValue = 0
animation.duration = 1
animation.repeatCount = .infinity
backgroundMask.add(animation, forKey: "MyAnimation")
}
override func draw(_ rect: CGRect) {
let sides = 6
let rect = self.bounds
let path = UIBezierPath()
let cornerRadius : CGFloat = 10
let rotationOffset = CGFloat(.pi / 2.0)
let theta: CGFloat = CGFloat(2.0 * .pi) / CGFloat(sides) // How much to turn at every corner
let width = min(rect.size.width, rect.size.height) // Width of the square
let center = CGPoint(x: rect.origin.x + width / 2.0, y: rect.origin.y + width / 2.0)
// Radius of the circle that encircles the polygon
// Notice that the radius is adjusted for the corners, that way the largest outer
// dimension of the resulting shape is always exactly the width - linewidth
let radius = (width - lineWidth + cornerRadius - (cos(theta) * cornerRadius)) / 2.0
// Start drawing at a point, which by default is at the right hand edge
// but can be offset
var angle = CGFloat(rotationOffset)
let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
path.move(to: CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta)))
for _ in 0..<sides {
angle += theta
let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
let tip = CGPoint(x: center.x + radius * cos(angle), y: center.y + radius * sin(angle))
let start = CGPoint(x: corner.x + cornerRadius * cos(angle - theta), y: corner.y + cornerRadius * sin(angle - theta))
let end = CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta))
path.addLine(to: start)
path.addQuadCurve(to: end, controlPoint: tip)
}
path.close()
backgroundMask.path = path.cgPath
}}
解决方案
要在蓝色动画路径下添加灰色六边形,您可以添加另一个CAShapeLayer
:
var grayLayer = CAShapeLayer()
以类似的方式设置它backgroundMask
:
grayLayer.lineWidth = lineWidth
grayLayer.fillColor = nil
grayLayer.strokeColor = UIColor.gray.cgColor
将其路径设置为与以下路径相同backgroundMask
:
backgroundMask.path = path.cgPath
grayLayer.path = path.cgPath
最后,在添加之前添加灰色层backgroundMask
。这使它在底部:
layer.addSublayer(grayLayer)
layer.addSublayer(backgroundMask)
另请注意,您的路径绘制代码不需要进入draw
. 它可以进去init
。
这是动画的一帧的样子:
推荐阅读
- node.js - 我的虚拟专用服务器似乎没有端口
- spring-boot - 如何将“requestParameters”记录为数组
- python - 使用 Sklearn 的 ROC 曲线下的面积?
- android - Android 电视布局尺寸
- sql - 对于每一行,列出销售额的总和以及销售额更高的那些人的平均值
- mysql - 如何在 SQL 内部联接中添加别名?
- asp.net-web-api - 在发布 ASP.NET Core 时排除 xml 文件
- angular - 如何在@Input Angular中传递异步?
- jakarta-ee - 类文件 javax/ejb/EJBTransactionRolledbackException 测试方法时出现非本机或抽象方法中的缺失代码属性
- java - 如果任何其他线程未调用 await(),线程的某些子类是否可以调用 Condition 的函数 signal()?