Swift - 如何動畫畫線不正確？只能畫直腸？

Question

我已經瀏覽過這個，但還沒有找到答案。我一直在這一段時間，需要知道如何動畫LINE而不是矩形。

從我所看到的動畫是非常不同的從中風到框。只是需要一些指針這裏 -

我有一個觀點上的負載（未與動畫，它只是在吸引它）在這裏繪製邊框：

override public func drawRect(rect: CGRect){ 
     super.drawRect(rect) 

     let borderColor = self.hasError! ? kDefaultActiveColor : kDefaultErrorColor 

     let textRect = self.textRectForBounds(rect) 

     let context = UIGraphicsGetCurrentContext() 
     let borderlines : [CGPoint] = [CGPointMake(0, CGRectGetHeight(textRect) - 1), 
      CGPointMake(CGRectGetWidth(textRect), CGRectGetHeight(textRect) - 1)] 

     if self.enabled { 

      CGContextBeginPath(context); 
      CGContextAddLines(context, borderlines, 2); 
      CGContextSetLineWidth(context, 1.3); 
      CGContextSetStrokeColorWithColor(context, borderColor.CGColor); 
      CGContextStrokePath(context); 

我得到這個從另外一個答案，我試圖把它拆開。當視圖加載時，我需要該線從其中心進行動畫/成長，如同在這裏繪製的動畫一樣，其寬度和大小相同。

我不知道如何做到這一點，但是另外一個答案達到我需要的效果由邊界設置爲大小爲零這裏：

self.activeBorder = UIView(frame: CGRectZero) 
self.activeBorder.backgroundColor = kDefaultActiveColor 
//self.activeBorder.backgroundColor = kDefaultActiveBorderColor 
self.activeBorder.layer.opacity = 0 
self.addSubview(self.activeBorder) 

和動畫使用：

self.borderlines.transform = CATransform3DMakeScale(CGFloat(0.01), CGFloat(1.0), 1) 
self.activeBorder.layer.opacity = 1 

CATransaction.begin() 
self.activeBorder.layer.transform = CATransform3DMakeScale(CGFloat(0.03), CGFloat(1.0), 1) 
let anim2 = CABasicAnimation(keyPath: "transform") 
let fromTransform = CATransform3DMakeScale(CGFloat(0.01), CGFloat(1.0), 1) 
let toTransform = CATransform3DMakeScale(CGFloat(1.0), CGFloat(1.0), 1) 
anim2.fromValue = NSValue(CATransform3D: fromTransform) 
anim2.toValue = NSValue(CATransform3D: toTransform) 
anim2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 
anim2.fillMode = kCAFillModeForwards 
anim2.removedOnCompletion = false 
self.activeBorder.layer.addAnimation(anim2, forKey: "_activeBorder") 

CATransaction.commit() 

這似乎是使用完全不同的代碼比我原來的drawRect，我不知道如何結合這兩者。我在哪裏錯了？我如何從中心畫出我的第一個邊框，因爲我在第二個邊框處繪製邊框？

Answer 1

使用CAShapeLater,UIBezierPath和CABasicAnimation來動畫畫線。

下面是示例代碼：

class SampleView: UIView { 

    override public func drawRect(rect: CGRect) { 
     let leftPath = UIBezierPath() 
     leftPath.moveToPoint(CGPointMake(CGRectGetMidX(frame), CGRectGetHeight(frame))) 
     leftPath.addLineToPoint(CGPointMake(0, CGRectGetHeight(frame))) 

     let rightPath = UIBezierPath() 
     rightPath.moveToPoint(CGPointMake(CGRectGetMidX(frame), CGRectGetHeight(frame))) 
     rightPath.addLineToPoint(CGPointMake(CGRectGetWidth(frame), CGRectGetHeight(frame))) 

     let leftShapeLayer = CAShapeLayer() 
     leftShapeLayer.path = leftPath.CGPath 
     leftShapeLayer.strokeColor = UIColor.redColor().CGColor; 
     leftShapeLayer.lineWidth = 1.3 
     leftShapeLayer.strokeEnd = 0 
     layer.addSublayer(leftShapeLayer) 

     let rightShpaeLayer = CAShapeLayer() 
     rightShpaeLayer.path = rightPath.CGPath 
     rightShpaeLayer.strokeColor = UIColor.redColor().CGColor; 
     rightShpaeLayer.lineWidth = 1.3 
     rightShpaeLayer.strokeEnd = 0 
     layer.addSublayer(rightShpaeLayer) 

     let drawLineAnimation = CABasicAnimation(keyPath: "strokeEnd") 
     drawLineAnimation.toValue = NSNumber(float: 1) 
     drawLineAnimation.duration = 1 
     drawLineAnimation.fillMode = kCAFillModeForwards 
     drawLineAnimation.removedOnCompletion = false 

     leftShapeLayer.addAnimation(drawLineAnimation, forKey: nil) 
     rightShpaeLayer.addAnimation(drawLineAnimation, forKey: nil) 
    } 

} 

的ViewController

// ... 
let sampleView = SampleView() 
sampleView.frame = CGRectMake(10, 60, 240, 50) 
sampleView.backgroundColor = UIColor.lightGrayColor() 
view.addSubview(sampleView) 

在這裏，在viewDidLoad的代碼是捕獲：

注：如果您在iOS9模擬器中運行代碼（我尚未測試過早期版本），則動畫可能會被阻止。選擇在真實設備或iOS10模擬器中運行它。