원의 절반 만 그립니다.

Question

원의 왼쪽 또는 오른쪽 절반 만 그립니다.

아무런 문제없이 0에서 0.5 (오른쪽)까지 원을 그릴 수 있습니다. 그러나 원을 0.5에서 1 (왼쪽)으로 그리는 것은 효과가 없습니다.

전화 : 이것은 내 코드입니다

addCircleView(circle, isForeground: false, duration: 0.0, fromValue: 0.5, toValue: 1.0) 

:

func addCircleView(myView : UIView, isForeground : Bool, duration : NSTimeInterval, fromValue: CGFloat, toValue : CGFloat) -> CircleView { 
     let circleWidth = CGFloat(280) 
     let circleHeight = circleWidth 

     // Create a new CircleView 
     let circleView = CircleView(frame: CGRectMake(0, 0, circleWidth, circleHeight)) 

     //Setting the color. 
     if (isForeground == true) { 

      circleView.setStrokeColor((UIColor(hexString: "#ffefdb")?.CGColor)!) 
     } else { 
      // circleLayer.strokeColor = UIColor.grayColor().CGColor 
      //Chose to use hexes because it's much easier. 
      circleView.setStrokeColor((UIColor(hexString: "#51acbc")?.CGColor)!) 
     } 

     myView.addSubview(circleView) 

     //Rotate the circle so it starts from the top. 
     circleView.transform = CGAffineTransformMakeRotation(-1.56) 

     // Animate the drawing of the circle 
     circleView.animateCircleTo(duration, fromValue: fromValue, toValue: toValue) 

     return circleView 

    } 

원 뷰 클래스

당신은 설정해야

import UIKit 
extension UIColor { 
    /// UIColor(hexString: "#cc0000") 
    internal convenience init?(hexString:String) { 
     guard hexString.characters[hexString.startIndex] == Character("#") else { 
      return nil 
     } 
     guard hexString.characters.count == "#000000".characters.count else { 
      return nil 
     } 
     let digits = hexString.substringFromIndex(hexString.startIndex.advancedBy(1)) 
     guard Int(digits,radix:16) != nil else{ 
      return nil 
     } 
     let red = digits.substringToIndex(digits.startIndex.advancedBy(2)) 
     let green = digits.substringWithRange(Range<String.Index>(digits.startIndex.advancedBy(2)..<digits.startIndex.advancedBy(4))) 
     let blue = digits.substringWithRange(Range<String.Index>(digits.startIndex.advancedBy(4)..<digits.startIndex.advancedBy(6))) 
     let redf = CGFloat(Double(Int(red, radix:16)!)/255.0) 
     let greenf = CGFloat(Double(Int(green, radix:16)!)/255.0) 
     let bluef = CGFloat(Double(Int(blue, radix:16)!)/255.0) 
     self.init(red: redf, green: greenf, blue: bluef, alpha: CGFloat(1.0)) 
    } 
} 

class CircleView: UIView { 

    var circleLayer: CAShapeLayer! 
    var from : CGFloat = 0.0; 


    override init(frame: CGRect) { 
     super.init(frame: frame) 
     self.backgroundColor = UIColor.clearColor() 

     // Use UIBezierPath as an easy way to create the CGPath for the layer. 
     // The path should be the entire circle. 
     let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2.0, y: frame.size.height/2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true) 

     // Setup the CAShapeLayer with the path, colors, and line width 
     circleLayer = CAShapeLayer() 
     circleLayer.path = circlePath.CGPath 
     circleLayer.fillColor = UIColor.clearColor().CGColor 

     //I'm going to change this in the ViewController that uses this. Not the best way, I know but alas. 
     circleLayer.strokeColor = UIColor.redColor().CGColor 

     //You probably want to change this width 
     circleLayer.lineWidth = 3.0; 

     // Don't draw the circle initially 
     circleLayer.strokeEnd = 0.0 

     // Add the circleLayer to the view's layer's sublayers 
     layer.addSublayer(circleLayer) 

    } 

    func setStrokeColor(color : CGColorRef) { 
     circleLayer.strokeColor = color 
    } 


    // This is what you call if you want to draw a full circle. 
    func animateCircle(duration: NSTimeInterval) { 
     animateCircleTo(duration, fromValue: 0.0, toValue: 1.0) 
    } 

    // This is what you call to draw a partial circle. 
    func animateCircleTo(duration: NSTimeInterval, fromValue: CGFloat, toValue: CGFloat){ 
     // We want to animate the strokeEnd property of the circleLayer 
     let animation = CABasicAnimation(keyPath: "strokeEnd") 

     // Set the animation duration appropriately 
     animation.duration = duration 

     // Animate from 0 (no circle) to 1 (full circle) 
     animation.fromValue = 0 
     animation.toValue = toValue 

     // Do an easeout. Don't know how to do a spring instead 
     animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 

     // Set the circleLayer's strokeEnd property to 1.0 now so that it's the 
     // right value when the animation ends. 
     circleLayer.strokeEnd = toValue 

     // Do the actual animation 
     circleLayer.addAnimation(animation, forKey: "animateCircle") 
    } 


    // required function 
    required init(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

} 

Answer 1

:

circleLayer.strokeStart = fromValue

animateCircleTo (duration ...) 함수에서

입니다.

획의 끝은 설정하지만 시작은 설정하지 않습니다. 결과적으로 모든 원 애니메이션은 나중에 획의 시작 부분에서 시작하려는 경우에도 0.0에서 시작합니다. 이처럼

:

// This is what you call to draw a partial circle. 
func animateCircleTo(duration: NSTimeInterval, fromValue: CGFloat, toValue: CGFloat){ 
    // We want to animate the strokeEnd property of the circleLayer 
    let animation = CABasicAnimation(keyPath: "strokeEnd") 

    // Set the animation duration appropriately 
    animation.duration = duration 

    // Animate from 0 (no circle) to 1 (full circle) 
    animation.fromValue = 0 
    animation.toValue = toValue 

    // Do an easeout. Don't know how to do a spring instead 
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 

    // Set the circleLayer's strokeEnd property to 1.0 now so that it's the 
    // right value when the animation ends. 
    circleLayer.strokeStart = fromValue 
    circleLayer.strokeEnd = toValue 

    // Do the actual animation 
    circleLayer.addAnimation(animation, forKey: "animateCircle") 
} 

Answer 2

가장 쉬운 방법은 마스크 또는 원하지 않는 원의 절반을 클립하는 것입니다. 원의 절반이 표시되는 위치는 클리핑을 넣어

class HalfCircleView : UIView { 
    override func draw(_ rect: CGRect) { 
     let p = UIBezierPath(rect: CGRect(x: 50, y: 0, width: 50, height: 100)) 
     p.addClip() 
     let p2 = UIBezierPath(ovalIn: CGRect(x: 10, y: 10, width: 80, height: 80)) 
     p2.lineWidth = 2 
     p2.stroke() 
    } 
} 

물론

이다. 그리고 반원 뷰가 있으면 당연히 회전시킬 수 있습니다.