2016-04-25 2 views
12

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

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

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

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

This is where the animation starts

Благодаря

ответ

12

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

И это работает так: top-center start animation
Вы также можете изменить код, и начать с любой точки вы хотите.

+0

Работает как очарование! Спасибо! :) – rulilg

Смежные вопросы