UIBezeierPathで描画した線をCGPointで定義したポイントを基準にアニメーションさせたいです。
以下にイメージ図を添付しました。
黒い線が、UIBezierPathで引いた線、赤い丸がCGPointです。
画像のとおり、真ん中のCGPointをアニメーションさせて、線の形を変えたいです。
以下のとおり、コードを記述したのですが、なぜかうまくいかず、
お知恵をお貸しいただけたら幸いです。
Swift
1var verticalLine: CAShapeLayer? 2 3 override func viewDidLoad() { 4 super.viewDidLoad() 5 // Do any additional setup after loading the view, typically from a nib. 6 7 let w = UIScreen.mainScreen().bounds.width 8 let h = UIScreen.mainScreen().bounds.height 9 let centerY = h / 2 10 11 verticalLine = CAShapeLayer() 12 verticalLine?.lineWidth = 3.0 13 verticalLine?.strokeColor = UIColor.redColor().CGColor 14 verticalLine?.fillColor = UIColor.clearColor().CGColor 15 16 let bezierPath = UIBezierPath() 17 let point_1 = CGPointMake(0, centerY) 18 let point_2 = CGPointMake(50, centerY) 19 let point_3 = CGPointMake(100, centerY) 20 bezierPath.moveToPoint(point_1) 21 bezierPath.addLineToPoint(point_2) 22 bezierPath.addLineToPoint(point_3) 23 24 verticalLine?.path = bezierPath.CGPath 25 self.view.layer.addSublayer(verticalLine!) 26 } 27 28 29 @IBAction func addAnimation(sender: UIButton) { 30 31 let h = UIScreen.mainScreen().bounds.height 32 let centerY = h / 2 33 34 let bezierPath_move1 = UIBezierPath() 35 let point_1_move1 = CGPointMake(0, centerY) 36 let point_2_move1 = CGPointMake(50, centerY - 100) 37 let point_3_move1 = CGPointMake(100, centerY) 38 bezierPath_move1.moveToPoint(point_1_move1) 39 bezierPath_move1.addLineToPoint(point_2_move1) 40 bezierPath_move1.addLineToPoint(point_3_move1) 41 42 // アニメーション 43 let bounce = CAKeyframeAnimation(keyPath: "path") 44 bounce.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn) 45 46 let values = [ 47 bezierPath_move1 48 ] 49 50 bounce.values = values 51 bounce.duration = 0.9 52 bounce.removedOnCompletion = false 53 bounce.fillMode = kCAFillModeForwards 54 bounce.delegate = self 55 56 verticalLine?.addAnimation(bounce, forKey: "return") 57 }
こちらのサイトを参考にしました。
CAKeyframeAnimationを使ってUIBezierPathをアニメーションさせる
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。