パスの線を徐々に描いていくアニメーション

Question

UIBezierPathを使ったアニメーションで、線を徐々に描いていくようなアニメーションを実現させたいです。

なんとなくUIBezierPathとCAKeyFrameAnimationを組み合わせれば出来そうな気がするのですが、具体的なプログラムが想像できず、困っております。

あらかじめ決められたポイントに沿って、UIBezierPathで引いたパスの上を実線で描いていく、イメージとしてはペンで紙の上に線を描いていくような感じです。

何卒、よろしくお願いします。

Answer 1

こんなんでどうでしょう。
viewDidLoadで生成しているパスを変えれば円形以外のも書けるはずです。
参考サイト：
http://c-geru.com/as_blind_side/2015/10/uibezierpath.html

class ViewController: UIViewController {

	let shapeLayer: CAShapeLayer = {
		let layer = CAShapeLayer()
		layer.frame = CGRect(x: 0, y: 0, width: 100.0, height: 100.0)
		layer.fillColor = UIColor.clearColor().CGColor
		layer.strokeColor = UIColor.blueColor().CGColor
		layer.lineWidth = 1.0
		return layer
	}()

	override func viewDidLoad() {
		super.viewDidLoad()

		// 円形に描画するのでそのパスを生成
		let center = CGPoint(x: self.shapeLayer.bounds.size.width / 2.0, y: self.shapeLayer.bounds.size.height / 2.0) // 中心座標
		let radius = self.shapeLayer.bounds.size.width / 3.0  // 半径
		let startAngle = CGFloat(-M_PI_2)  // 開始点(真上)
		let endAngle = startAngle + 2.0 * CGFloat(M_PI)  // 終了点(開始点から一周)
		let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
		self.shapeLayer.path = path.CGPath

		self.view.layer.addSublayer(self.shapeLayer)
	}

	override func viewDidLayoutSubviews() {
		super.viewDidLayoutSubviews()

		// 画面の中心になるようにする
		self.shapeLayer.position = CGPoint(x: self.view.bounds.size.width / 2.0, y: self.view.bounds.height / 2.0)
	}

	override func viewWillAppear(animated: Bool) {
		super.viewWillAppear(animated)

		// アニメーション開始
		let anim = CABasicAnimation(keyPath: "strokeEnd")
		anim.duration = 3.0
		anim.fromValue = 0.0
		anim.toValue = 1.0
		shapeLayer.addAnimation(anim, forKey: "circleAnim")
	}

}

Comments

[退会済みユーザー]

ありがとうございました！

[退会済みユーザー]

なるほどー！Swiftに変換していただき、ありがとうございます！この方法でいけそうです！

Answer 2

以下のサイトの色を変更している処理を線を描く処理に変更すれば、
アニメーションするような気がします。
ただし、線を描く処理にもよると思いますが。
http://dev.classmethod.jp/references/ios-uikit-keyframeanimation/

Comments

[退会済みユーザー]

>サイトの色を変更している処理を線を描く処理に変更

この処理が具体的に分からず、困っています。

色の変更であれば、ただパラメータの数値を変更するだけですが、
線の描画の場合は、パスとパスをつなぐポイント間の線の描画をCAKeyframeAnimationが補ってくれるという認識でしょうか？

[YasuhiroMiyake]

u39uedaさんがいいコメントをされているので、そちらを参考すると良いかもしれません。

かんたんに説明すると短い線を描くロジックを書いて数値変化で長い線を書けるようにする。または続きを書く処理(書き始める視点を最後に書いた終わりの位置に変更する)

まずは線を描くロジックを書いて、ボタンを押すと徐々に伸びいていくロジックが書ければ
それをアニメーション用に乗せて、ボタンを押す処理をタイマー処理などで呼び出すとイメージが湧くかもしれません。

[退会済みユーザー]

ありがとうございました！