Infinityを描画して円上をどのように動かすか？

Question

私は無限大のシンボルを描きたいと思います。そのパスには、すべてのパスをカバーする塗りつぶし円を動かさなければなりません。 それはカスタマイズ可能でなければなりません。ある値の場合は左側にしておかなければなりませんし、ある値の場合は別の側に行くべきです。 Is this possible first of all ?

今私が円を描くことができていると私はこれを使用して、そのパスに円を移動することができる午前：

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) 

そして、私はこれを使用してもサインカーブを描くことができています：

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

しかし私はそれらを混ぜ合わせて私が望むものを得ることはできません。どんな助けもありがとう。ありがとう。

Answer 1

最後に私はそれを達成できました。同じことを望んでいる誰かのために、これは私のUIViewクラスである：

まだのObjective-Cを使用して、古いガードのために

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

：

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];