使用 CAShapeLayer 多次动画圆圈进度
Animating a circles progress more than once with CAShapeLayer
我需要在用户点击按钮时为圆圈的进度设置动画。我目前正在使用 CAShapeLayer
和 CABasicAnimation
。代码如下:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var circleContainerView: UIView!
var progressPts = [0.1, 0.3, 0.7, 0.5]
let circleLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
setupCircle()
}
@IBAction func didTapAnimate(_ sender: Any) {
guard let pt = progressPts.first else { return }
let animateStroke = CABasicAnimation(keyPath: "strokeEnd")
animateStroke.toValue = pt
animateStroke.duration = 2.0
animateStroke.fillMode = .forwards
animateStroke.isRemovedOnCompletion = false
circleLayer.add(animateStroke, forKey: "MyAnimation")
progressPts.removeFirst()
}
private func setupCircle() {
circleLayer.frame = CGRect(origin: .zero, size: circleContainerView.bounds.size)
let center = CGPoint(x: circleLayer.bounds.width / 2.0,
y: circleLayer.bounds.height / 2.0)
circleLayer.path = UIBezierPath(arcCenter: center,
radius: (circleLayer.bounds.height / 2.0) - 5.0,
startAngle: 0,
endAngle: 2 * CGFloat.pi, clockwise: true).cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.lineWidth = 10.0
circleLayer.strokeColor = UIColor.red.cgColor
circleLayer.strokeEnd = 0.0
circleContainerView.layer.addSublayer(circleLayer)
}
}
为了让笔画在动画结束时保持在正确的位置,我还需要将 fillMode
设置为 .forwards
并将 isRemovedOnCompletion
设置为 false
。这适用于第一个动画。然而,在下一个动画中,冲程首先重置:
我在这里做错了什么?如何在不重置的情况下为每个新的进度位置设置动画?此外,将 isRemovedOnCompletion
设置为 false
当然不是一个好主意,因为图层最终会附加多个动画。
我刚刚使用 from value 属性 完成了一个没有重置的圆,它会很流畅地使用下面的代码
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var circleContainerView: UIView!
var progressPts = [0.1, 0.3, 0.7, 0.5]
var previousPts = 0.0
let circleLayer = CAShapeLayer()
var animateStroke: CABasicAnimation!
override func viewDidLoad() {
super.viewDidLoad()
setupCircle()
}
@IBAction func didTapAnimate(_ sender: Any) {
guard let pt = progressPts.first else { return }
animateStroke.fromValue = previousPts
animateStroke.toValue = pt
animateStroke.duration = 2.0
animateStroke.fillMode = .forwards
animateStroke.isRemovedOnCompletion = false
circleLayer.add(animateStroke, forKey: "MyAnimation")
previousPts = progressPts.removeFirst()
}
private func setupCircle() {
animateStroke = CABasicAnimation(keyPath: "strokeEnd")
circleLayer.frame = CGRect(origin: .zero, size: circleContainerView.bounds.size)
let center = CGPoint(x: circleLayer.bounds.width / 2.0,
y: circleLayer.bounds.height / 2.0)
circleLayer.path = UIBezierPath(arcCenter: center,
radius: (circleLayer.bounds.height / 2.0) - 5.0,
startAngle: 0,
endAngle: 2 * CGFloat.pi, clockwise: true).cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.lineWidth = 10.0
circleLayer.strokeColor = UIColor.red.cgColor
circleLayer.strokeEnd = 0.0
circleContainerView.layer.addSublayer(circleLayer)
}
}
输出
我需要在用户点击按钮时为圆圈的进度设置动画。我目前正在使用 CAShapeLayer
和 CABasicAnimation
。代码如下:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var circleContainerView: UIView!
var progressPts = [0.1, 0.3, 0.7, 0.5]
let circleLayer = CAShapeLayer()
override func viewDidLoad() {
super.viewDidLoad()
setupCircle()
}
@IBAction func didTapAnimate(_ sender: Any) {
guard let pt = progressPts.first else { return }
let animateStroke = CABasicAnimation(keyPath: "strokeEnd")
animateStroke.toValue = pt
animateStroke.duration = 2.0
animateStroke.fillMode = .forwards
animateStroke.isRemovedOnCompletion = false
circleLayer.add(animateStroke, forKey: "MyAnimation")
progressPts.removeFirst()
}
private func setupCircle() {
circleLayer.frame = CGRect(origin: .zero, size: circleContainerView.bounds.size)
let center = CGPoint(x: circleLayer.bounds.width / 2.0,
y: circleLayer.bounds.height / 2.0)
circleLayer.path = UIBezierPath(arcCenter: center,
radius: (circleLayer.bounds.height / 2.0) - 5.0,
startAngle: 0,
endAngle: 2 * CGFloat.pi, clockwise: true).cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.lineWidth = 10.0
circleLayer.strokeColor = UIColor.red.cgColor
circleLayer.strokeEnd = 0.0
circleContainerView.layer.addSublayer(circleLayer)
}
}
为了让笔画在动画结束时保持在正确的位置,我还需要将 fillMode
设置为 .forwards
并将 isRemovedOnCompletion
设置为 false
。这适用于第一个动画。然而,在下一个动画中,冲程首先重置:
我在这里做错了什么?如何在不重置的情况下为每个新的进度位置设置动画?此外,将 isRemovedOnCompletion
设置为 false
当然不是一个好主意,因为图层最终会附加多个动画。
我刚刚使用 from value 属性 完成了一个没有重置的圆,它会很流畅地使用下面的代码
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var circleContainerView: UIView!
var progressPts = [0.1, 0.3, 0.7, 0.5]
var previousPts = 0.0
let circleLayer = CAShapeLayer()
var animateStroke: CABasicAnimation!
override func viewDidLoad() {
super.viewDidLoad()
setupCircle()
}
@IBAction func didTapAnimate(_ sender: Any) {
guard let pt = progressPts.first else { return }
animateStroke.fromValue = previousPts
animateStroke.toValue = pt
animateStroke.duration = 2.0
animateStroke.fillMode = .forwards
animateStroke.isRemovedOnCompletion = false
circleLayer.add(animateStroke, forKey: "MyAnimation")
previousPts = progressPts.removeFirst()
}
private func setupCircle() {
animateStroke = CABasicAnimation(keyPath: "strokeEnd")
circleLayer.frame = CGRect(origin: .zero, size: circleContainerView.bounds.size)
let center = CGPoint(x: circleLayer.bounds.width / 2.0,
y: circleLayer.bounds.height / 2.0)
circleLayer.path = UIBezierPath(arcCenter: center,
radius: (circleLayer.bounds.height / 2.0) - 5.0,
startAngle: 0,
endAngle: 2 * CGFloat.pi, clockwise: true).cgPath
circleLayer.fillColor = UIColor.clear.cgColor
circleLayer.lineWidth = 10.0
circleLayer.strokeColor = UIColor.red.cgColor
circleLayer.strokeEnd = 0.0
circleContainerView.layer.addSublayer(circleLayer)
}
}
输出