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

问题描述 投票:0回答:2

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

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

ios swift uibezierpath
2个回答
1
投票

最后我能够实现它。对于想要这样做的人来说,这是我的UIView类:

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

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];
© www.soinside.com 2019 - 2024. All rights reserved.