在swift 3中绘制动画圆圈

时间:2017-02-14 13:07:42

标签: swift3 uibezierpath

参考:https://stackoverflow.com/a/26578895/6619234

如何在点击evnet上擦除和重绘圆圈? 我试图在点击事件上调用addCircleView方法,但每次都重复圆。

class CircleClosing: UIView {

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!
    circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width / 2.0, y: frame.size.height / 2.0), radius: (frame.size.width - 5)/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.blue.cgColor
    circleLayer.lineWidth = 20.0;

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

    // Add the circleLayer to the view's layer's sublayers


}
override func layoutSubviews()
{
    let frame = self.layer.bounds
    circleLayer.frame = frame
    layer.addSublayer(circleLayer)

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

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() {

    var circleView :  CircleClosing!
    let diceRoll = CGFloat(510)    //CGFloat(Int(arc4random_uniform(7))*50)
    let diceRolly = CGFloat(70)
    let circleWidth = CGFloat(40)
    let circleHeight = circleWidth

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

    view.addSubview(circleView)

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

提前致谢

1 个答案:

答案 0 :(得分:0)

  var circleView :  CircleClosing!

func addCircleView() {
    let diceRoll = CGFloat(510)    //CGFloat(Int(arc4random_uniform(7))*50)
    let diceRolly = CGFloat(70)
    let circleWidth = CGFloat(40)
    let circleHeight = circleWidth

    //Add this line here to remove from superview
    circleView.removeFromSuperview()

    circleView = CircleClosing(frame:CGRect(x:diceRoll,y: diceRolly,width: circleWidth,height: circleHeight) )

    view.addSubview(circleView)

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