问题描述
我试图创建一个活动图，例如Apple Watch上的活动图。 （3次带有动画的铃声）
这是我的完整代码：
private(set) var animationTime: [CFTimeInterval] = [1,1,1]
private(set) var values: [Double] = [0,0]
private(set) var colors: [UIColor] = [UIColor.red,CUIColor.blue,CUIColor.green]
private(set) var radiusRatios: [Double] = [1,1]
// to add new value
func setCircle(number index: Int,data: Double) {
values[index] = data
}
var drawing = false
var animationoption = UIView.Animationoptions()
override public func draw(_ rect: CGRect) {
if !drawing {
switch style {
case .ring:
drawing = true
let borderThickness = (rect.width / 20).rounded().nextUp
let circledistance = (rect.width / 20).rounded().nextUp
self.layer.sublayers?.removeAll()
var maximumAnimationDuration: TimeInterval = 0
for index in 0 ..< dataSize {
let belowCircle = CAShapeLayer()
let mainCircle = CAShapeLayer()
layer.addSublayer(belowCircle)
layer.addSublayer(mainCircle)
belowCircle.position = CGPoint(x: layer.bounds.midX,y: layer.bounds.midY)
mainCircle.position = CGPoint(x: layer.bounds.midX,y: layer.bounds.midY)
let outerCircularPath = UIBezierPath(arcCenter: .zero,radius: rect.width / 2
- borderThickness * CGFloat(2 * index + 1) / 2
- circledistance * CGFloat(index),startAngle: 0,endAngle: 2 * CGFloat.pi,clockwise: true)
belowCircle.path = outerCircularPath.cgPath
mainCircle.path = outerCircularPath.cgPath
belowCircle.opacity = 0.2
belowCircle.strokeColor = colors[index].cgColor
belowCircle.linewidth = borderThickness
belowCircle.fillColor = UIColor.clear.cgColor
belowCircle.lineCap = CAShapeLayerLineCap.round
mainCircle.strokeColor = colors[index].cgColor
mainCircle.linewidth = borderThickness
mainCircle.fillColor = UIColor.clear.cgColor
mainCircle.lineCap = CAShapeLayerLineCap.round
mainCircle.strokeEnd = 0
mainCircle.transform = CATransform3DMakeRotation(-CGFloat.pi / 2,1)
// outer circle
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.tovalue = values[index] < 0.001 ? 0.001 : values[index]
animation.duration = animationTime[index]
animation.fillMode = camediatimingFillMode.forwards
animation.isRemovedOnCompletion = false
mainCircle.add(animation,forKey: "RingChartOuterCircle\(index)")
maximumAnimationDuration = max(maximumAnimationDuration,animationTime[index])
}
UIView.transition(with: self,duration: maximumAnimationDuration,options: animationoption,animations: nil,completion: { [weak self] _ in
self?.drawing = false
})
当我想使用它时，我可以从父视图控制器使用此功能：
public func setChartsValus(outerValue: Double,middleValue: Double,innerValue: Double) {
ringChart.setNeedsdisplay()
ringChart.setCircle(number: 0,data: outerValue)
ringChart.setCircle(number: 1,data: middleValue)
ringChart.setCircle(number: 2,data: innerValue)
}
那样：
setChartsValus(outerValue: 0.5,middleValue: 0.8,innerValue: 0.6)
我的问题是，当我想添加一个新值（每隔几分钟就会发生一次）时，我必须删除所有子层并再次执行该过程，这就是为什么每次调用它时，所有回叫到零，然后再次从0移到该值，这根本不好。 出现此问题的原因是：
self.layer.sublayers?.removeAll()
如果我不删除所有内容，则所有图层会互相叠加，并且变得如此混乱。
我想，当我从示例0.7中添加一个新值，而旧值是0.3时，戒指开始从0.3增长到0.7（就像苹果手表活动应用程序一样），而不是回到零并再次填充。
如果每个人都可以帮助我，我将不胜感激？我花了两天时间修复它，但找不到任何方法。
非常感谢
解决方法
我的解决方案是删除以前的图层，添加具有相同strokeEnd的新图层并将其设置为新值。
override public func draw(_ rect: CGRect) {
transform(rect)
}
func transform(_ rect: CGRect,to newValues: [CGFloat]? = nil) {
if !drawing {
switch style {
case .ring:
drawing = true
let borderThickness = (rect.width / 20).rounded().nextUp
let circleDistance = (rect.width / 20).rounded().nextUp
self.layer.sublayers?.removeAll()
for index in 0 ..< 3 {
let belowCircle = CAShapeLayer()
let mainCircle = CAShapeLayer()
layer.addSublayer(belowCircle)
layer.addSublayer(mainCircle)
belowCircle.position = CGPoint(x: layer.bounds.midX,y: layer.bounds.midY)
mainCircle.position = CGPoint(x: layer.bounds.midX,y: layer.bounds.midY)
let outerCircularPath = UIBezierPath(arcCenter: .zero,radius: rect.width / 2
- borderThickness * CGFloat(2 * index + 1) / 2
- circleDistance * CGFloat(index),startAngle: 0,endAngle: 2 * CGFloat.pi,clockwise: true)
belowCircle.path = outerCircularPath.cgPath
mainCircle.path = outerCircularPath.cgPath
belowCircle.opacity = 0.2
belowCircle.strokeColor = colors[index].cgColor
belowCircle.lineWidth = borderThickness
belowCircle.fillColor = UIColor.clear.cgColor
belowCircle.lineCap = CAShapeLayerLineCap.round
mainCircle.strokeColor = colors[index].cgColor
mainCircle.lineWidth = borderThickness
mainCircle.fillColor = UIColor.clear.cgColor
mainCircle.lineCap = CAShapeLayerLineCap.round
if let newValues = newValues {
mainCircle.strokeEnd = values[index]
} else {
mainCircle.strokeEnd = 0
}
mainCircle.transform = CATransform3DMakeRotation(-CGFloat.pi / 2,1)
let animation = CABasicAnimation(keyPath: "strokeEnd")
if let newValues = newValues {
animation.toValue = newValues[index] < 0.001 ? 0.001 : newValues[index]
} else {
animation.toValue = values[index] < 0.001 ? 0.001 : values[index]
}
animation.duration = animationTime[index]
animation.fillMode = CAMediaTimingFillMode.forwards
animation.isRemovedOnCompletion = false
mainCircle.add(animation,forKey: "RingChartOuterCircle\(index)")
}
drawing = false
case .chart:
break
}
}
在容器视图控制器中，我使用新值再次调用函数transform：
override func viewDidLoad() {
super.viewDidLoad()
setChartsValus(outerValue: outerValue,middleValue: middleValue,innerValue: innerValue)
// suppose we need to change 10% every 2 second
Timer.scheduledTimer(timeInterval: 2,target: self,selector: #selector(changeValue),userInfo: nil,repeats: true)
}
@objc func changeValue() {
outerValue += 0.1
innerValue += 0.1
middleValue += 0.1
ringChart.layer.sublayers?.removeAll()
ringChart.transform(ringChart.bounds,to: [outerValue,middleValue,innerValue])
}