swift - 如何为 CAKeyFrameAnimation 设置端点?
问题描述
我正在使用弧线作为进度条。
有一个轨迹层,进度指示器沿着它移动,我还有一个圆圈随着进度条移动以增加重点。进度条和圆圈都沿路径正确移动,但是当进度完成时,圆圈不会停在路径的末端,而是跳回到进度路径的开头。
编码:
class ViewController: UIViewController {
let shapeLayer = CAShapeLayer()
let trackLayer = CAShapeLayer()
let dotLayer: CALayer = CALayer()
let seconds = 10.0
// MARK: - Properties
private var progressBarView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
title = "Making Progress"
view.backgroundColor = .systemTeal
// determine the value of Center
let center = view.center
let circularPath = UIBezierPath(arcCenter: center, radius: 100, startAngle: 2.7, endAngle: 0.45, clockwise: true) // these values give us a complete circle
trackLayer.path = circularPath.cgPath
trackLayer.strokeColor = UIColor.lightGray.cgColor
trackLayer.lineWidth = 10
trackLayer.fillColor = UIColor.clear.cgColor
trackLayer.lineCap = .round
view.layer.addSublayer(trackLayer)
shapeLayer.path = circularPath.cgPath
shapeLayer.strokeColor = UIColor.red.cgColor
shapeLayer.lineWidth = 10
shapeLayer.strokeEnd = 0
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineCap = .round
view.layer.addSublayer(shapeLayer)
view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap )))
}
@objc private func handleTap() {
print("Attempting to animate stroke")
let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
basicAnimation.toValue = 1
basicAnimation.duration = seconds
basicAnimation.fillMode = CAMediaTimingFillMode.forwards
basicAnimation.isRemovedOnCompletion = false
shapeLayer.add(basicAnimation, forKey: "anyKeyWillDo")
// circle image
let circleNobImage = UIImage(named: "whiteCircle.png")!
dotLayer.contents = circleNobImage.cgImage
dotLayer.bounds = CGRect(x: 0.0, y: 0.0, width: circleNobImage.size.width, height: circleNobImage.size.height)
view.layer.addSublayer(dotLayer)
dotLayer.position = CGPoint(x: 105, y: 460)
dotLayer.opacity = 1
dotAnimation()
}
func dotAnimation() {
let dotAnimation = CAKeyframeAnimation(keyPath: "position")
dotAnimation.path = trackLayer.path
dotAnimation.calculationMode = .paced
let dotAnimationGroup = CAAnimationGroup()
dotAnimationGroup.duration = seconds
dotAnimation.autoreverses = false
dotAnimationGroup.animations = [dotAnimation]
dotLayer.add(dotAnimationGroup, forKey: nil)
}
}
我需要用进度条让圆圈停在弧的末端。这是怎么做到的?
解决方案
推荐阅读
- sql - 我在十进制(17,2)字段中发现了意外的结果,有人可以看看这个并告诉我为什么会这样
- r - R - 根据前一行中的值为数据框中的行创建唯一的序列 ID
- java - 如何在杰克逊序列化中自定义日期,@JsonSerialize 不起作用
- node.js - 如何将前端添加到已部署的后端项目(相同的仓库)
- javascript - 使用jquery重置每个文档单击的超时
- c++ - OpenCV Mat 问题:直方图和这个循环之间的区别
- flutter - Flutter - 在后台构建、渲染小部件并捕获它
- identityserver4 - AddConfigurationStore 使用 Oracle.EntityFrameworCore(2.18.0-beta3) OracleException: ORA-00942: 表或视图不存在
- php - 评论没有显示在godaddy上
- angular - 预期参数 1-3,但得到 0