Wie zeichnet man die Unendlichkeit und bewegt den Kreis auf diesem Weg?

Question

Ich möchte ein Unendlichkeitssymbol zeichnen und auf diesem Pfad muss ich einen gefüllten Kreis bewegen, um den ganzen Weg zu bedecken. Und es sollte customize-fähig sein, wie für einige Wert sollte es auf der linken Seite bleiben und für etwas Wert wird es auf eine andere Seite gehen. Is this possible first of all ?

Im Moment bin ich in der Lage, einen Kreis zu zeichnen, und ich bin in der Lage Kreis auf diesem Weg zu bewegen, dies mit:

let circlePath = UIBezierPath(arcCenter: CGPoint(x:self.view.frame.midX, y:self.view.frame.midY), radius: self.view.frame.size.width/3, startAngle: 0, endAngle:CGFloat(Double.pi)*2, clockwise: true) 

    circlePathSize = circlePath.bounds.size 

    // circleLayer is only used to locate the circle animation path 

    circleLayer.path = circlePath.cgPath 
    circleLayer.strokeColor = UIColor.white.cgColor 
    circleLayer.shadowColor = UIColor.darkGray.cgColor 
    circleLayer.shadowOpacity = 7.0 
    circleLayer.shadowRadius = 2.0 
    circleLayer.shadowOffset = CGSize(width: -1, height: 0) 
    circleLayer.lineWidth = 3.0 
    circleLayer.fillColor = UIColor.clear.cgColor 
    self.view.layer.addSublayer(circleLayer) 

    let animation = CAKeyframeAnimation(keyPath: "position"); 
    animation.duration = 5.0 
    animation.repeatCount = MAXFLOAT 
    animation.path = circlePath.cgPath 

    //whatever the value of origin for squareView will not affect the animation 
    squareView.frame = CGRect(x: 0, y: 0, width: 20, height: 20) 
    squareView.layer.cornerRadius = 10 
    squareView.layer.shadowColor = UIColor.darkGray.cgColor 
    squareView.layer.shadowOpacity = 7.0 
    squareView.layer.shadowRadius = 3.0 
    squareView.layer.shadowOffset = CGSize(width: 2, height: 0) 

    squareView.backgroundColor = UIColor.white 
    self.view.addSubview(squareView) 
    // You can also pass any unique string value for key 
    squareView.layer.add(animation, forKey: nil) 

Und ich bin in der Lage Sinuskurve zeichnen auch diese mit:

let origin = CGPoint(x: width * (1 - graphWidth)/2, y: height * 0.50) 

     let path = UIBezierPath() 
     path.move(to: origin) 

     for angle in stride(from: 5.0, through: 360.0, by: 5.0) { 
      let x = origin.x + CGFloat(angle/360.0) * width * graphWidth 
      let y = origin.y - CGFloat(sin(angle/180.0 * Double.pi)) * height * amplitude 
      path.addLine(to: CGPoint(x: x, y: y)) 
     } 

     UIColor.white.setStroke() 
     path.stroke() 

Aber ich bin nicht in der Lage, sie zu mischen, um zu bekommen, was ich begehre. Jede Hilfe wäre willkommen. Vielen Dank.

Answer 1

Endlich konnte ich es erreichen. Für jemanden, der die gleiche, das ist meine UIView Klasse tun möchte:

class InfinitySymbolView: UIView { 

    var path: UIBezierPath! 

    let circleLayer = CAShapeLayer() 
    var circlePathSize:CGSize? 
    let circleView = UIView() 

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

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

    } 


    // Only override draw() if you perform custom drawing. 
    // An empty implementation adversely affects performance during animation. 
    override func draw(_ rect: CGRect) { 
     // Drawing code 

     let height = self.frame.height 
     let width = self.frame.width 
     let heightFactor = height/4 
     let widthFactor = width/4 

     path = UIBezierPath() 
     path.lineWidth = 3.0 

     path.move(to: CGPoint(x:widthFactor, y: heightFactor * 3)) 
     path.addCurve(to: CGPoint(x:widthFactor, y: heightFactor), controlPoint1: CGPoint(x:0, y: heightFactor * 3), controlPoint2: CGPoint(x:0, y: heightFactor)) 

     path.move(to: CGPoint(x:widthFactor, y: heightFactor)) 
     path.addCurve(to: CGPoint(x:widthFactor * 3, y: heightFactor * 3), controlPoint1: CGPoint(x:widthFactor * 2, y: heightFactor), controlPoint2: CGPoint(x:widthFactor * 2, y: heightFactor * 3)) 

     path.move(to: CGPoint(x:widthFactor * 3, y: heightFactor * 3)) 
     path.addCurve(to: CGPoint(x:widthFactor * 3, y: heightFactor), controlPoint1: CGPoint(x:widthFactor * 4 + 5, y: heightFactor * 3), controlPoint2: CGPoint(x:widthFactor * 4 + 5, y: heightFactor)) 

     path.move(to: CGPoint(x:widthFactor * 3, y: heightFactor)) 
     path.addCurve(to: CGPoint(x:widthFactor, y: heightFactor * 3), controlPoint1: CGPoint(x:widthFactor * 2, y: heightFactor), controlPoint2: CGPoint(x:widthFactor * 2, y: heightFactor * 3)) 

     UIColor.purple.setStroke() 
     path.stroke() 

     let shapeLayer = CAShapeLayer() 
     shapeLayer.path = path.cgPath 
     shapeLayer.fillColor = UIColor.clear.cgColor 
     self.layer.addSublayer(shapeLayer) 

     animateCircleOnPath() 
    } 

    func animateCircleOnPath(){ 
     let animation = CAKeyframeAnimation(keyPath: "position"); 
     animation.duration = 5.0 
     animation.repeatCount = MAXFLOAT 
     animation.path = path.cgPath 
     circleView.frame = CGRect(x: 0, y: 0, width: 20, height: 20) 
     circleView.layer.cornerRadius = 10 
     circleView.layer.shadowColor = UIColor.darkGray.cgColor 
     circleView.layer.shadowOpacity = 7.0 
     circleView.layer.shadowRadius = 3.0 
     circleView.layer.shadowOffset = CGSize(width: 2, height: 0) 
     circleView.backgroundColor = UIColor.white 
     self.addSubview(circleView) 
     circleView.layer.add(animation, forKey: nil) 
    } 
} 

Answer 2

für die alte Garde noch Objective-C mit:

float loopHeight = 50; 
    float loopWidth = 80; 
    float heightFactor = loopHeight/4; 
    float widthFactor = loopWidth/4; 

    UIView * infinityView = [UIView new]; 
    infinityView.frame = CGRectMake((w-loopWidth)/2, h-loopHeight-20, loopWidth, loopHeight); 
    [self.view addSubview:infinityView]; 

    UIBezierPath * infinityPath = [UIBezierPath bezierPath]; 
    [infinityPath moveToPoint:CGPointMake(widthFactor, heightFactor * 3)]; 
    [infinityPath addCurveToPoint:CGPointMake(widthFactor, heightFactor) controlPoint1:CGPointMake(0, heightFactor * 3) controlPoint2:CGPointMake(0, heightFactor)]; 
    [infinityPath addCurveToPoint:CGPointMake(widthFactor * 3, heightFactor * 3) controlPoint1:CGPointMake(widthFactor * 2, heightFactor) controlPoint2:CGPointMake(widthFactor * 2, heightFactor * 3)]; 
    [infinityPath addCurveToPoint:CGPointMake(widthFactor * 3, heightFactor) controlPoint1:CGPointMake(widthFactor * 4, heightFactor * 3) controlPoint2:CGPointMake(widthFactor * 4, heightFactor)]; 
    [infinityPath addCurveToPoint:CGPointMake(widthFactor, heightFactor * 3) controlPoint1:CGPointMake(widthFactor * 2, heightFactor) controlPoint2:CGPointMake(widthFactor * 2, heightFactor * 3)]; 


    CAShapeLayer * infinityShape = [CAShapeLayer layer]; 
    infinityShape.path = infinityPath.CGPath; 
    infinityShape.lineWidth = 3.0f; 
    infinityShape.strokeColor = [UIColor whiteColor].CGColor; 
    infinityShape.fillColor = [UIColor clearColor].CGColor; 
    [infinityView.layer addSublayer:infinityShape];