像蘋果手錶一樣的圖形

Question

謝謝大家的回覆。我的新的固定circleView現在是：進口的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設置動畫。否則，您只需自己繪製所有中間形狀並創建自己的動畫。