如何绘制无限并在该路径上移动圆圈?

时间:2017-11-27 10:34:40

标签: ios swift uibezierpath

我想画一个无穷大符号,在那条路上,我必须移动一个圆圈来覆盖所有路径。 并且它应该是可定制的,就像某些价值它应该留在左侧而且对于某些价值它会转到另一边。 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()

但是我无法将它们混合起来以获得我想要的东西。任何帮助,将不胜感激。感谢。

1 个答案:

答案 0 :(得分:0)

对于仍在使用Objective-C的旧守卫:

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