किसी वृत्त की चेतन रेखा

Question

मैं एक वृत्त के आरेख को चेतन करने का मार्ग खोज रहा हूँ। मैं सर्कल बनाने में सक्षम हूं, लेकिन यह सब एक साथ खींचता है।

यहाँ मेरी CircleViewकक्षा है:

import UIKit

class CircleView: UIView {
  override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = UIColor.clearColor()
  }

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


  override func drawRect(rect: CGRect) {
    // Get the Graphics Context
    var context = UIGraphicsGetCurrentContext();

    // Set the circle outerline-width
    CGContextSetLineWidth(context, 5.0);

    // Set the circle outerline-colour
    UIColor.redColor().set()

    // Create Circle
    CGContextAddArc(context, (frame.size.width)/2, frame.size.height/2, (frame.size.width - 10)/2, 0.0, CGFloat(M_PI * 2.0), 1)

    // Draw
    CGContextStrokePath(context);
  }
}

और यहां बताया गया है कि मैं इसे अपने व्यू कंट्रोलर में व्यू पदानुक्रम में कैसे जोड़ता हूं:

func addCircleView() {
    let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
    var circleWidth = CGFloat(200)
    var circleHeight = circleWidth
    // Create a new CircleView
    var circleView = CircleView(frame: CGRectMake(diceRoll, 0, circleWidth, circleHeight))

    view.addSubview(circleView)
}

वहाँ 1 सेकंड में सर्कल के ड्राइंग को चेतन करने का एक तरीका है?

उदाहरण, एनीमेशन के माध्यम से इस छवि में नीली रेखा जैसा कुछ दिखाई देगा:

Comments

जब मैं ऊपर की कक्षा का उपयोग करता हूं, तो सर्कल पूरी तरह से भरा नहीं है, इसका रिंग सर्कल (डोनट लुकिंग) कोई विचार क्यों?

— ऐस ग्रीन

आप इस उत्तर को आजमा सकते हैं , जो एक और कोशिश कर रहा है

— अली ए। जलील

Answer 1

ऐसा करने का सबसे आसान तरीका कोर एनीमेशन की शक्ति का उपयोग करना है जो आपके लिए सबसे अधिक काम करता है। ऐसा करने के लिए, हमें आपके drawRectफ़ंक्शन से आपके सर्कल ड्राइंग कोड को स्थानांतरित करना होगा CAShapeLayer। फिर, हम एक का उपयोग कर सकते CABasicAnimationचेतन करने के लिए CAShapeLayerकी strokeEndसे संपत्ति 0.0के लिए 1.0। strokeEndयहाँ जादू का एक बड़ा हिस्सा है; डॉक्स से:

स्ट्रोकस्टार्ट संपत्ति के साथ संयुक्त, यह संपत्ति स्ट्रोक के लिए पथ के सबग्रियन को परिभाषित करती है। इस संपत्ति में मूल्य पथ के साथ सापेक्ष बिंदु को इंगित करता है जिस पर पथपाकर समाप्त होता है जबकि स्ट्रोकस्टार्ट संपत्ति प्रारंभिक बिंदु को परिभाषित करती है। 0.0 का मान पथ की शुरुआत का प्रतिनिधित्व करता है जबकि 1.0 का मान पथ के अंत का प्रतिनिधित्व करता है। बीच में मानों की व्याख्या पथ लंबाई के साथ रैखिक रूप से की जाती है।

अगर हम इसे सेट strokeEndकरते हैं 0.0, तो यह कुछ भी आकर्षित नहीं करेगा। यदि हम इसे सेट करते हैं 1.0, तो यह एक पूर्ण चक्र बना देगा। यदि हम इसे सेट करते हैं 0.5, तो यह एक आधा वृत्त खींचेगा। आदि।

तो, शुरू करने के लिए, की सुविधा देता है एक बनाने के CAShapeLayerअपने में CircleViewके initसमारोह और है कि परत जोड़ने देखने के sublayers(भी निकालने का ध्यान रखें drawRectसमारोह के बाद से परत अब सर्कल ड्राइंग हो जाएगा):

let circleLayer: CAShapeLayer!

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(Double.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
    circleLayer.strokeColor = UIColor.redColor().CGColor
    circleLayer.lineWidth = 5.0;

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

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

ध्यान दें: हम सेट कर रहे हैं circleLayer.strokeEnd = 0.0ताकि सर्कल तुरंत तैयार न हो।

अब, एक फंक्शन जोड़ने देता है जिसे हम सर्कल एनीमेशन को ट्रिगर करने के लिए कॉल कर सकते हैं:

func animateCircle(duration: NSTimeInterval) {
    // 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 = 1

    // Do a linear animation (i.e. the speed of the animation stays the same)
    animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

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

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

फिर, हम सभी सब करने की ज़रूरत अपने को बदलने है addCircleViewसमारोह इतना है कि यह एनीमेशन जोड़ते चलाता है CircleViewइसके लिए superview:

func addCircleView() {
    let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
     var circleWidth = CGFloat(200)
     var circleHeight = circleWidth

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

     view.addSubview(circleView)

     // Animate the drawing of the circle over the course of 1 second
     circleView.animateCircle(1.0)
}

सभी को एक साथ रखना चाहिए कुछ इस तरह दिखना चाहिए:

नोट: यह उस तरह नहीं दोहराएगा, यह एनिमेशन होने के बाद एक पूर्ण चक्र बना रहेगा।

Comments

@ माइक आप जवाब महान है! क्या आपके पास कोई विचार है कि इसे SKScene / SKView / SKSpriteNode के अंदर SpriteKit पर कैसे लागू किया जाए? वहाँ वस्तु SKShapeNode है, लेकिन इसे बुरा (बग) माना जाता है और समर्थन नहीं करता हैstrokeEnd

— Kalzem

यह पाया: self.view?.layer.addSublayer(circleLayer):-)

— कालज़ेम 20

@colindunnn सिर्फ startAngle:और के endAngle:मापदंडों को बदलते हैं UIBezierPath। 03 स्थिति है, इसलिए 12 स्थिति उससे 90 ° कम होगी, जो कि रेडियन में-2/2 है। तो, पैरामीटर होगा startAngle: CGFloat(-M_PI_2), endAngle: CGFloat((M_PI * 2.0) - M_PI_2)।

— माइक एस

@ मायके हम इसे लूप में कैसे लागू करेंगे? - खुद के ऊपर लगातार ड्राइंग के बिना

— रामबोसा

सर्कल शुरू करने और 12 बजे समाप्त होने के लिए, startAngle: (0 - (Double.pi / 2)) + 0.00001और endAngle: 0 - (Double.pi / 2)। अगर startAngleऔर endAngleसमान हैं, तो चक्र नहीं खींचा जाएगा, यही कारण है कि आप बहुत छोटी ऑफसेट को घटाते हैंstartAngle

— सिल्वन डी ऐश

Answer 2

स्विफ्ट 3.0 के लिए माइक का जवाब अपडेट किया गया

var circleLayer: CAShapeLayer!

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

    // 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.clear.cgColor
    circleLayer.strokeColor = UIColor.red.cgColor
    circleLayer.lineWidth = 5.0;

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

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

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

func animateCircle(duration: TimeInterval) {
    // 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 = 1

    // Do a linear animation (i.e The speed of the animation stays the same)
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)

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

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

फ़ंक्शन को कॉल करने के लिए:

func addCircleView() {
    let diceRoll = CGFloat(Int(arc4random_uniform(7))*50)
    var circleWidth = CGFloat(200)
    var circleHeight = circleWidth

    // Create a new CircleView
    let circleView = CircleView(frame: CGRect(x: diceRoll, y: 0, width: circleWidth, height: circleHeight))
    //let test = CircleView(frame: CGRect(x: diceRoll, y: 0, width: circleWidth, height: circleHeight))

    view.addSubview(circleView)

    // Animate the drawing of the circle over the course of 1 second
    circleView.animateCircle(duration: 1.0)
}

Comments

M_PIपदावनत किया जाता है - CGFloat.piइसके बजाय उपयोग करें ।

— टॉम

AddCircleView फ़ंक्शन में "अनसुलझे पहचानकर्ता का उपयोग करें" CircleView '"त्रुटि

— UserDev

Answer 3

माइक का जवाब बहुत अच्छा है! इसे करने का एक और अच्छा और सरल तरीका यह है कि ड्रॉइरेक्ट का उपयोग सेटनिड्सडिसप्ले () के साथ किया जाए। यह भारी लगता है, लेकिन इसके :-) नहीं

हम ऊपर से शुरू होने वाले एक वृत्त को खींचना चाहते हैं, जो -90 ° है और 270 ° पर समाप्त होता है। सर्कल का केंद्र एक दिए गए त्रिज्या के साथ (सेंटरएक्स, सेंटरवाई) है। CurrentAngle सर्कल के अंत-बिंदु का वर्तमान कोण है, जो MinAngle (-90) से maxAngle (270) तक जा रहा है।

// MARK: Properties
let centerX:CGFloat = 55
let centerY:CGFloat = 55
let radius:CGFloat = 50

var currentAngle:Float = -90
let minAngle:Float = -90
let maxAngle:Float = 270

ड्राअरक्ट में, हम निर्दिष्ट करते हैं कि सर्कल को कैसे प्रदर्शित किया जाए:

override func drawRect(rect: CGRect) {

    let context = UIGraphicsGetCurrentContext()

    let path = CGPathCreateMutable()

    CGPathAddArc(path, nil, centerX, centerY, radius, CGFloat(GLKMathDegreesToRadians(minAngle)), CGFloat(GLKMathDegreesToRadians(currentAngle)), false)

    CGContextAddPath(context, path)
    CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)
    CGContextSetLineWidth(context, 3)
    CGContextStrokePath(context)
}

समस्या यह है कि अभी, जैसा कि करंट एंगल नहीं बदल रहा है, सर्कल स्थिर है, और यह भी नहीं दिखाता है, जैसा कि करंट एंगल = मिंजल है।

हम तब एक टाइमर बनाते हैं, और जब कभी भी उस टाइमर में आग लग जाती है, तो हम करंट को बढ़ा देते हैं। अपनी कक्षा के शीर्ष पर, दो आग के बीच का समय जोड़ें:

let timeBetweenDraw:CFTimeInterval = 0.01

अपने init में, टाइमर जोड़ें:

NSTimer.scheduledTimerWithTimeInterval(timeBetweenDraw, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)

हम उस फ़ंक्शन को जोड़ सकते हैं जिसे टाइमर फायर होने पर बुलाया जाएगा:

func updateTimer() {

    if currentAngle < maxAngle {
        currentAngle += 1
    }
}

अफसोस की बात है कि ऐप चलाते समय, कुछ भी प्रदर्शित नहीं होता है क्योंकि हमने सिस्टम को निर्दिष्ट नहीं किया है कि इसे फिर से ड्रा करना चाहिए। यह setNeedsDisplay () कॉल करके किया जाता है। यहां अपडेट किया गया टाइमर फ़ंक्शन है:

func updateTimer() {

    if currentAngle < maxAngle {
        currentAngle += 1
        setNeedsDisplay()
    }
}

_ _ _

आपके लिए आवश्यक सभी कोड यहाँ सारांशित हैं:

import UIKit
import GLKit

class CircleClosing: UIView {

    // MARK: Properties
    let centerX:CGFloat = 55
    let centerY:CGFloat = 55
    let radius:CGFloat = 50

    var currentAngle:Float = -90

    let timeBetweenDraw:CFTimeInterval = 0.01

    // MARK: Init
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    func setup() {
        self.backgroundColor = UIColor.clearColor()
        NSTimer.scheduledTimerWithTimeInterval(timeBetweenDraw, target: self, selector: #selector(updateTimer), userInfo: nil, repeats: true)
    }

    // MARK: Drawing
    func updateTimer() {

        if currentAngle < 270 {
            currentAngle += 1
            setNeedsDisplay()
        }
    }

    override func drawRect(rect: CGRect) {

        let context = UIGraphicsGetCurrentContext()

        let path = CGPathCreateMutable()

        CGPathAddArc(path, nil, centerX, centerY, radius, -CGFloat(M_PI/2), CGFloat(GLKMathDegreesToRadians(currentAngle)), false)

        CGContextAddPath(context, path)
        CGContextSetStrokeColorWithColor(context, UIColor.blueColor().CGColor)
        CGContextSetLineWidth(context, 3)
        CGContextStrokePath(context)
    }
}

यदि आप गति बदलना चाहते हैं, तो बस अद्यतन फ़ंक्शन को संशोधित करें, या जिस दर पर यह फ़ंक्शन कहा जाता है। सर्कल पूरा होने के बाद, आप टाइमर को अमान्य करना चाहते हैं, जिसे मैं भूल गया था :-)

NB: अपने स्टोरीबोर्ड में सर्कल जोड़ने के लिए, बस एक दृश्य जोड़ें, इसे चुनें, इसके पहचान निरीक्षक पर जाएं और कक्षा के रूप में , CircleClosing निर्दिष्ट करें ।

चीयर्स! भाई

Comments

आपका बहुत बहुत धन्यवाद! क्या आप जानते हैं कि इसे SKScene में कैसे लागू किया जाए? मुझे कोई रास्ता नहीं मिला।

— ऑस्कर

अरे, मैं इसे

— देखूंगा

Answer 4

यदि आप एक पूरा हैंडलर चाहते हैं, तो यह स्विफ्ट 3.0 में किए गए माइक एस के समान एक और समाधान है

func animateCircleFull(duration: TimeInterval) {
    CATransaction.begin()
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.duration = duration
    animation.fromValue = 0
    animation.toValue = 1
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    circleLayer.strokeEnd = 1.0
    CATransaction.setCompletionBlock {
        print("animation complete")
    }
    // Do the actual animation
    circleLayer.add(animation, forKey: "animateCircle")
    CATransaction.commit()
}

पूरा करने वाले हैंडलर के साथ, आप एनीमेशन को फिर से चला सकते हैं या फिर एक ही फ़ंक्शन को दोबारा एनीमेशन करने के लिए कॉल कर सकते हैं (जो बहुत अच्छा नहीं लगेगा), या आपके पास एक उलटा फ़ंक्शन हो सकता है जो एक शर्त पूरी होने तक लगातार चेन करेगा। , उदाहरण के लिए:

func animate(duration: TimeInterval){
    self.isAnimating = true
    self.animateCircleFull(duration: 1)
}

func endAnimate(){
    self.isAnimating = false
}

func animateCircleFull(duration: TimeInterval) {
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = 1
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 1.0
        CATransaction.setCompletionBlock { 
            self.animateCircleEmpty(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

func animateCircleEmpty(duration: TimeInterval){
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 1
        animation.toValue = 0
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 0
        CATransaction.setCompletionBlock {
            self.animateCircleFull(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

इसे भी कट्टर बनाने के लिए, आप एनीमेशन की दिशा इस तरह बदल सकते हैं:

 func setCircleClockwise(){
    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)
    self.circleLayer.removeFromSuperlayer()
    self.circleLayer = formatCirle(circlePath: circlePath)
    self.layer.addSublayer(self.circleLayer)
}

func setCircleCounterClockwise(){
    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: false)
    self.circleLayer.removeFromSuperlayer()
    self.circleLayer = formatCirle(circlePath: circlePath)
    self.layer.addSublayer(self.circleLayer)
}

func formatCirle(circlePath: UIBezierPath) -> CAShapeLayer{
    let circleShape = CAShapeLayer()
    circleShape.path = circlePath.cgPath
    circleShape.fillColor = UIColor.clear.cgColor
    circleShape.strokeColor = UIColor.red.cgColor
    circleShape.lineWidth = 10.0;
    circleShape.strokeEnd = 0.0
    return circleShape
}

func animate(duration: TimeInterval){
    self.isAnimating = true
    self.animateCircleFull(duration: 1)
}

func endAnimate(){
    self.isAnimating = false
}

func animateCircleFull(duration: TimeInterval) {
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = 1
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 1.0
        CATransaction.setCompletionBlock {
            self.setCircleCounterClockwise()
            self.animateCircleEmpty(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

func animateCircleEmpty(duration: TimeInterval){
    if self.isAnimating{
        CATransaction.begin()
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 1
        animation.toValue = 0
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        circleLayer.strokeEnd = 0
        CATransaction.setCompletionBlock {
            self.setCircleClockwise()
            self.animateCircleFull(duration: duration)
        }
        // Do the actual animation
        circleLayer.add(animation, forKey: "animateCircle")
        CATransaction.commit()
    }
}

Answer 5

न केवल आप एक उप-वर्ग UIViewकर सकते हैं, आप थोड़ा गहरे भी जा सकते हैं, उपवर्ग एCALayer

दूसरे शब्दों में, CoreAnimation's का स्ट्रोक ठीक है। कॉलर के ड्रॉ को कॉल करने के लिए (ctx में) अक्सर भी ठीक है

और गोल रेखा टोपी अच्छी है

प्रमुख बिंदु है, काइलेर की विधि को ओवरराइड करना action(forKey:)

क्रियाएँ एक परत के लिए गतिशील व्यवहार को परिभाषित करती हैं। उदाहरण के लिए, एक परत के एनिमेट करने योग्य गुणों में आमतौर पर वास्तविक एनिमेशन को आरंभ करने के लिए संबंधित कार्रवाई ऑब्जेक्ट होते हैं। जब वह संपत्ति बदल जाती है, तो परत संपत्ति के नाम के साथ जुड़े एक्शन ऑब्जेक्ट की तलाश करती है और उसे निष्पादित करती है।

कैशेलेयर के लिए आंतरिक उपवर्ग

/**
 The internal subclass for CAShapeLayer.
 This is the class that handles all the drawing and animation.
 This class is not interacted with, instead
 properties are set in UICircularRing

 */
class UICircularRingLayer: CAShapeLayer {

    // MARK: Properties
    @NSManaged var val: CGFloat

    let ringWidth: CGFloat = 20
    let startAngle = CGFloat(-90).rads

    // MARK: Init

    override init() {
        super.init()
    }

    override init(layer: Any) {
        guard let layer = layer as? UICircularRingLayer else { fatalError("unable to copy layer") }

        super.init(layer: layer)
    }

    required init?(coder aDecoder: NSCoder) { return nil }

    // MARK: Draw

    /**
     Override for custom drawing.
     Draws the ring 
     */
    override func draw(in ctx: CGContext) {
        super.draw(in: ctx)
        UIGraphicsPushContext(ctx)
        // Draw the rings
        drawRing(in: ctx)
        UIGraphicsPopContext()
    }

    // MARK: Animation methods

    /**
     Watches for changes in the val property, and setNeedsDisplay accordingly
     */
    override class func needsDisplay(forKey key: String) -> Bool {
        if key == "val" {
            return true
        } else {
            return super.needsDisplay(forKey: key)
        }
    }

    /**
     Creates animation when val property is changed
     */
    override func action(forKey event: String) -> CAAction? {
        if event == "val"{
            let animation = CABasicAnimation(keyPath: "val")
            animation.fromValue = presentation()?.value(forKey: "val")
            animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            animation.duration = 2
            return animation
        } else {
            return super.action(forKey: event)
        }
    }


    /**
     Draws the ring for the view.
     Sets path properties according to how the user has decided to customize the view.
     */
    private func drawRing(in ctx: CGContext) {

        let center: CGPoint = CGPoint(x: bounds.midX, y: bounds.midY)

        let radiusIn: CGFloat = (min(bounds.width, bounds.height) - ringWidth)/2
        // Start drawing
        let innerPath: UIBezierPath = UIBezierPath(arcCenter: center,
                                                   radius: radiusIn,
                                                   startAngle: startAngle,
                                                   endAngle: toEndAngle,
                                                   clockwise: true)

        // Draw path
        ctx.setLineWidth(ringWidth)
        ctx.setLineJoin(.round)
        ctx.setLineCap(CGLineCap.round)
        ctx.setStrokeColor(UIColor.red.cgColor)
        ctx.addPath(innerPath.cgPath)
        ctx.drawPath(using: .stroke)

    }


    var toEndAngle: CGFloat {
        return (val * 360.0).rads + startAngle
    }


}

सहायक विधियाँ

/**
 A private extension to CGFloat in order to provide simple
 conversion from degrees to radians, used when drawing the rings.
 */
extension CGFloat {
    var rads: CGFloat { return self * CGFloat.pi / 180 }
}

आंतरिक कस्टम CALayer के साथ एक UIView उपवर्ग का उपयोग करें

@IBDesignable open class UICircularRing: UIView {

    /**
     Set the ring layer to the default layer, casted as custom layer
     */
    var ringLayer: UICircularRingLayer {
        return layer as! UICircularRingLayer
    }

    /**
     Overrides the default layer with the custom UICircularRingLayer class
     */
    override open class var layerClass: AnyClass {
        return UICircularRingLayer.self
    }

    /**
     Override public init to setup() the layer and view
     */
    override public init(frame: CGRect) {
        super.init(frame: frame)
        // Call the internal initializer
        setup()
    }

    /**
     Override public init to setup() the layer and view
     */
    required public init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        // Call the internal initializer
        setup()
    }

    /**
     This method initializes the custom CALayer to the default values
     */
    func setup(){
        // Helps with pixelation and blurriness on retina devices
        ringLayer.contentsScale = UIScreen.main.scale
        ringLayer.shouldRasterize = true
        ringLayer.rasterizationScale = UIScreen.main.scale * 2
        ringLayer.masksToBounds = false

        backgroundColor = UIColor.clear
        ringLayer.backgroundColor = UIColor.clear.cgColor
        ringLayer.val = 0
    }


    func startAnimation() {
        ringLayer.val = 1
    }
}

उपयोग:

class ViewController: UIViewController {

    let progressRing = UICircularRing(frame: CGRect(x: 100, y: 100, width: 250, height: 250))


    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(progressRing)
    }

    @IBAction func animate(_ sender: UIButton) {

        progressRing.startAnimation()

    }


}

कोण स्थापित करने के लिए एक संकेतक छवि के साथ

Answer 6

Swift 5 के लिए @Mike S का उत्तर अपडेट कर रहा है

frame manually、storyboard setup、 के लिए काम करता हैautolayout setup

class CircleView: UIView {

    let circleLayer: CAShapeLayer = {
        // Setup the CAShapeLayer with the path, colors, and line width
        let circle = CAShapeLayer()
        circle.fillColor = UIColor.clear.cgColor
        circle.strokeColor = UIColor.red.cgColor
        circle.lineWidth = 5.0

        // Don't draw the circle initially
        circle.strokeEnd = 0.0
        return circle
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setup()
    }

    func setup(){
        backgroundColor = UIColor.clear

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

    override func layoutSubviews() {
        super.layoutSubviews()
        // 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(Double.pi * 2.0), clockwise: true)

        circleLayer.path = circlePath.cgPath
    }

    func animateCircle(duration t: TimeInterval) {
        // We want to animate the strokeEnd property of the circleLayer
        let animation = CABasicAnimation(keyPath: "strokeEnd")

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

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

        // Do a linear animation (i.e. the speed of the animation stays the same)
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

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

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

उपयोग:

नमूना कोड के लिए frame manually, storyboard setup,autolayout setup

class ViewController: UIViewController {

    @IBOutlet weak var circleV: CircleView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func animateFrame(_ sender: UIButton) {


        let diceRoll = CGFloat(Int(arc4random_uniform(7))*30)
        let circleEdge = CGFloat(200)

        // Create a new CircleView
        let circleView = CircleView(frame: CGRect(x: 50, y: diceRoll, width: circleEdge, height: circleEdge))

        view.addSubview(circleView)

        // Animate the drawing of the circle over the course of 1 second
        circleView.animateCircle(duration: 1.0)


    }

    @IBAction func animateAutolayout(_ sender: UIButton) {

        let circleView = CircleView(frame: CGRect.zero)
        circleView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(circleView)
        circleView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        circleView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        circleView.widthAnchor.constraint(equalToConstant: 250).isActive = true
        circleView.heightAnchor.constraint(equalToConstant: 250).isActive = true
        // Animate the drawing of the circle over the course of 1 second
        circleView.animateCircle(duration: 1.0)
    }

    @IBAction func animateStoryboard(_ sender: UIButton) {
        // Animate the drawing of the circle over the course of 1 second
        circleV.animateCircle(duration: 1.0)

    }

}