Swift: анимация UIBezierPath для инсульта из центра

Я делал простую анимацию UIBezierPath со Swift. Этот путь состоит в создании закругленного прямоangularьника с цветной рамкой. Анимация должна быть рисунком цветной рамки. Для этого я создал CAShapeLayer с UIBezierPath(roundedRect:, cornerRadius: )

let layer = CAShapeLayer()
var viewPrueba = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    viewPrueba = UIView(frame: CGRectMake(self.view.frame.width/2-100, self.view.frame.height/2 - 100, 200, 200))
    self.view.addSubview(viewPrueba)
    let path = UIBezierPath(roundedRect: CGRectMake(0, 0, 200, 200), cornerRadius: 40.0)
    layer.path = path.CGPath
    layer.fillColor = UIColor.clearColor().CGColor
    layer.strokeColor = UIColor.blueColor().CGColor
    layer.strokeStart = 0.0
    layer.strokeEnd = 0.0
    layer.lineWidth = 4.0
    layer.lineJoin = kCALineJoinRound
    viewPrueba.layer.addSublayer(layer)
    let tapGR = UITapGestureRecognizer(target: self, action: #selector(ViewController.anim))
    self.view.addGestureRecognizer(tapGR)
}

func anim() {
    let anim1 = CABasicAnimation(keyPath: "strokeEnd")
    anim1.fromValue         = 0.0
    anim1.toValue           = 1.0
    anim1.duration          = 4.0
    anim1.repeatCount       = 0
    anim1.autoreverses      = false
    anim1.removedOnCompletion = false
    anim1.additive = true
    anim1.fillMode = kCAFillModeForwards
    self.layer.addAnimation(anim1, forKey: "strokeEnd")
}'

Это хорошо работает. Единственная проблема заключается в том, что анимация начинается с верхней левой части квадрата, а не с верхнего центра. Как я могу это сделать?

Единственное, что я нашел, чтобы добиться этого, это сделать это с помощью круга, а не прямоangularьника, а это не то, что нам нужно.

Спасибо

Ответ 1

CoreAnimate анимирован как тот же порядок, что и UIBezierPath.
Системный метод

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;

верните UIBezierPath, который был нарисован сверху слева, поэтому ваша анимация началась с верхнего левого.
Но вы можете создать свою собственную форму UIBezierPath в верхней части:

func centerStartBezierPath(frame:CGRect,cornerRadius:CGFloat) -> UIBezierPath {
    let path = UIBezierPath()
    path.moveToPoint(CGPointMake(frame.width/2.0, 0))
    path.addLineToPoint(CGPointMake(frame.width-cornerRadius, 0))
    path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(-M_PI/2),
                          endAngle: 0,
                          clockwise: true)
    path.addLineToPoint(CGPointMake(frame.width, frame.height-cornerRadius))
    path.addArcWithCenter(CGPointMake(frame.width-cornerRadius, frame.height-cornerRadius),
                          radius: cornerRadius,
                          startAngle: 0,
                          endAngle: CGFloat(M_PI/2),
                          clockwise: true)
    path.addLineToPoint(CGPointMake(cornerRadius, frame.height))
    path.addArcWithCenter(CGPointMake(cornerRadius, frame.height-cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(M_PI/2),
                          endAngle: CGFloat(M_PI),
                          clockwise: true)
    path.addLineToPoint(CGPointMake(0, cornerRadius))
    path.addArcWithCenter(CGPointMake(cornerRadius, cornerRadius),
                          radius: cornerRadius,
                          startAngle: CGFloat(M_PI),
                          endAngle: CGFloat(M_PI*3/2),
                          clockwise: true)
    path.closePath()

    path.applyTransform(CGAffineTransformMakeTranslation(frame.origin.x, frame.origin.y))

    return path;
}

И он работает следующим образом:
Вы также можете изменить код и начать с любой точки, которую хотите.

Ответ 2

Синтаксис Swift сильно изменился за эти три года. Вот моя обновленная версия первоначально принятого ответа, но в Swift 5. 1+

private extension UIBezierPath {

    convenience init(roundedRectFromCenter frame: CGRect, cornerRadius: CGFloat) {
        self.init()

        move(to: CGPoint(x: frame.width / 2, y: 0))
        addLine(to: CGPoint(x: frame.width - cornerRadius, y: 0))
        addArc(
            withCenter: CGPoint(x: frame.width - cornerRadius, y: cornerRadius),
            radius: cornerRadius,
            startAngle: -.pi / 2,
            endAngle: 0,
            clockwise: true
        )
        addLine(to: CGPoint(x: frame.width, y: frame.height - cornerRadius))
        addArc(
            withCenter: CGPoint(x: frame.width - cornerRadius, y: frame.height - cornerRadius),
            radius: cornerRadius,
            startAngle: 0,
            endAngle: .pi / 2,
            clockwise: true
        )
        addLine(to: CGPoint(x: cornerRadius, y: frame.height))
        addArc(
            withCenter: CGPoint(x: cornerRadius, y: frame.height - cornerRadius),
            radius: cornerRadius,
            startAngle: .pi / 2,
            endAngle: .pi,
            clockwise: true
        )
        addLine(to: CGPoint(x: 0, y: cornerRadius))
        addArc(
            withCenter: CGPoint(x: cornerRadius, y: cornerRadius),
            radius: cornerRadius,
            startAngle: .pi,
            endAngle: .pi * 3 / 2,
            clockwise: true
        )

        close()
        apply(CGAffineTransform(
            translationX: frame.origin.x,
            y: frame.origin.y
        ))
    }

}