スウィフト - アニメーションで線を描く方法はありませんか？ rectだけを描くことができますか？

Question

私はこのことについてこれまでに見てきましたが、まだ答えを見つけていません。私はこれをしばらくの間行っており、矩形ではなく線をアニメーション化する方法を知る必要があります。

アニメーションはストロークからボックスへと非常に異なっています。ただ、here-

いくつかのポインタを必要とする私はここ（アニメーションで、それはちょうどそれを描くない）ビュー負荷に描かれている境界線を持っている：

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とはまったく異なるコードを使用しているようで、私は2つの方法を組み合わせる方法がわかりません。私はここでどこが間違っていますか？私は第二の活発な国境をしているので、どうすれば私の最初の国境を中央から引き出すことができますか？

Answer 1

CAShapeLater,UIBezierPathおよびCABasicAnimationを使用して線を描きます。ここ

は、サンプルコードである：ここViewController

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

のviewDidLoadで

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

} 

コードは、キャプチャされ：

注： iOS9 Simulatorでコードを実行すると（以前のバージョンはテストしていません）、アニメーションがブロックされることがあります。実際のデバイスまたはiOS10 Simulatorで実行することを選択します。