图形像苹果手表一

Question

感谢大家的回复。我现在新固定的 circleView 是：import UIKit

class CircleView: UIView {

    private let progressLayer: CAShapeLayer = CAShapeLayer()
    private let  backgroundLayer = CAShapeLayer()

    private var progressLabel: UILabel

    required init?(coder aDecoder: NSCoder) {
        progressLabel = UILabel()
        super.init(coder: aDecoder)
        createProgressLayer()
//        createLabel()
    }

    override init(frame: CGRect) {
        progressLabel = UILabel()
        super.init(frame: frame)
        createProgressLayer()
//        createLabel()
    }

//    func createLabel() {
//        progressLabel = UILabel(frame: CGRectMake(0.0, 0.0, CGRectGetWidth(frame), 60.0))
//        progressLabel.textColor = .whiteColor()
//        progressLabel.textAlignment = .Center
//        progressLabel.text = "Load content"
//        progressLabel.font = UIFont(name: "HelveticaNeue-UltraLight", size: 40.0)
//        progressLabel.translatesAutoresizingMaskIntoConstraints = false
//        addSubview(progressLabel)
//        
//        addConstraint(NSLayoutConstraint(item: self, attribute: .CenterX, relatedBy: .Equal, toItem: progressLabel, attribute: .CenterX, multiplier: 1.0, constant: 0.0))
//        addConstraint(NSLayoutConstraint(item: self, attribute: .CenterY, relatedBy: .Equal, toItem: progressLabel, attribute: .CenterY, multiplier: 1.0, constant: 0.0))
//    }

    private func createProgressLayer() {
        var arcWidth: CGFloat = 3
        var arcBgColor: UIColor = UIColor(red:0.94, green:0.94, blue:0.94, alpha:1.0)

        let startAngle = CGFloat(M_PI_2)
        let endAngle = CGFloat(M_PI * 2 + M_PI_2)
        let radius: CGFloat = max(bounds.width, bounds.height)
        let center = CGPoint(x:bounds.width/2, y: bounds.height/2)

        let centerPoint = CGPointMake(CGRectGetWidth(frame)/2 , CGRectGetHeight(frame)/2)

        let gradientMaskLayer = gradientMask()
        progressLayer.path = UIBezierPath(arcCenter:centerPoint, radius: CGRectGetWidth(frame)/2 - 30.0, startAngle:startAngle, endAngle:endAngle, clockwise: true).CGPath
        backgroundLayer.path = UIBezierPath(arcCenter: centerPoint, radius: CGRectGetWidth(frame)/2 - 30.0, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath

        backgroundLayer.fillColor = UIColor.clearColor().CGColor
        backgroundLayer.lineWidth = 15.0
        backgroundLayer.strokeColor = arcBgColor.CGColor
        self.layer.addSublayer(backgroundLayer)

        progressLayer.backgroundColor = UIColor.clearColor().CGColor
        progressLayer.fillColor = nil
        progressLayer.strokeColor = UIColor.blackColor().CGColor
        progressLayer.lineWidth = 15.0
        progressLayer.strokeStart = 0.0
        progressLayer.strokeEnd = 0.0


        gradientMaskLayer.mask = progressLayer
        layer.addSublayer(gradientMaskLayer)
    }

    private func gradientMask() -> CAGradientLayer {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds

        gradientLayer.locations = [0.0, 1.0]

        let colorTop: AnyObject = UIColor(red: 255.0/255.0, green: 213.0/255.0, blue: 63.0/255.0, alpha: 1.0).CGColor
        let colorBottom: AnyObject = UIColor(red: 255.0/255.0, green: 198.0/255.0, blue: 5.0/255.0, alpha: 1.0).CGColor
        let arrayOfColors: [AnyObject] = [colorTop, colorBottom]
        gradientLayer.colors = arrayOfColors

        return gradientLayer
    }
//    
//    func hideProgressView() {
//        progressLayer.strokeEnd = 0.0
//        progressLayer.removeAllAnimations()
//        progressLabel.text = "Load content"
//    }

    func animateProgressView() {
//        progressLabel.text = "Loading..."
        progressLayer.strokeEnd = 0.0

        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.fromValue = CGFloat(0.0)
        animation.toValue = CGFloat(0.7)
        animation.duration = 1.0
        animation.delegate = self
        animation.removedOnCompletion = false
        animation.additive = true
        animation.fillMode = kCAFillModeForwards
        progressLayer.addAnimation(animation, forKey: "strokeEnd")
    }

}

但我现在真的很想知道如何：

用角落做这个，像苹果手表一样离开： enter image description here

以及如何将百分比标签从 0 移动到 70%，我的意思是，在圆动画的同时从 0 移动到 70。

Answer 1

执行此操作的简单方法是使用 CAShapeLayer 并为 strokeEnd 设置动画。否则，您只需要自己绘制所有中间形状并创建自己的动画。