CABasicAnimation circle CAShapeLayerがスケーリングの代わりにマップを移動する

Question

ビューが非表示のアニメーションを作成しようとしています。最初は、画面上のあるポイント（たとえば150）から開始し、画面全体に収まるまで拡大します。ここでは、私がこのスニペットでの問題は、それが円のサイズが大きな成長作るのではなく、画面に移動するように小さな円を引き起こすことがある

public func testAnimation(anchor : CGRect){ 
    self.isHidden = false 
    let mask = CAShapeLayer() 
    let radius = 15 
    mask.path = UIBezierPath(roundedRect: CGRect(x: 150,y: 150, width: Double(radius), height: Double(radius)), cornerRadius: CGFloat(radius/2)).cgPath 
    mask.position = CGPoint(x: 150,y: 150) 
    mask.fillColor = UIColor.blue.cgColor 

    self.layer.mask = mask 
    let oldBounds = mask.bounds 
    let newBounds = CGRect.init(x: 150,y: 150,width: 1600,height: 1600) 
    let revealAnimation = CABasicAnimation(keyPath: "bounds") 
    revealAnimation.fromValue = NSValue(cgRect: oldBounds) 
    revealAnimation.toValue = NSValue(cgRect: newBounds) 
    revealAnimation.duration = 5 

    //Keep the bounds after the animation completes. 
    mask.bounds = newBounds 
    mask.add(revealAnimation, forKey: "revealAnimation") 
} 

を試してみたものです。私はここに見つかったコードを使用しました：http://blog.ericd.net/2015/10/22/swift-animating-a-mask-for-a-uiview/（showUnderView関数）とそれは魅力的なように働いた。私は円の効果を得るためにCALayerをCAShapeLayerに入れ替えましたが、うまくいきません。

Answer 1

CALayerの境界をアニメーション化すると効果がありましたが、ここではCAShapeLayerを使用しています。新しい境界線を設定しても、シェイプを再描画したりスケーリングしたりすることはありません。

代わりに、直接形状をアニメーション化しようとする必要があります

let finalRadius: CGFloat = 1600 
let finalPath = UIBezierpath(roundedRect: CGRect(x: 150, y: 150, width: finalRadius, height: finalRadius), cornerRadius: finalRadius/2).cgPath 

let revealAnimation = CABasicAnimation(keyPath: "path") 
revealAnimation.toValue = finalPath 
revealAnimation.duration = 5 
mask.add(revealAnimation, forKey: "revealAnimation") 

これは、希望のサイズと形状を再描画します。

図形を中央に保持したい場合は、positionを同時にアニメーション化することができます。