iOS
CoreAnimation
Swift

【Swift】円形にゲージが増えるアニメーション

More than 3 years have passed since last update.


■ 概要

円形にゲージが上がっていくアニメーションを、Swiftコードで実装する際のサンプルを記載する


◆ 環境

Xcode: v6.1.1

Swift: v1.1


■ 実装

実装には CABasicAnimation を利用します。

なのでクラスファイルには import QuartzCore を忘れずに。

接頭辞からわかるように CALayer に対して設定が必要です。

今回はCABasicAnimationについての詳細は省きますが、keyで設定したプロパティに対してアニメーションを実行する、という機能となっています。

今回は "strokeEnd" というプロパティに対してアニメーションを設定します。

strokeEnd プロパティは CAShapeLayer のプロパティなので、CAShapeLayerを利用します。

strokeEnd プロパティは Shape の線描画が止まる位置を 0.0 〜 1.0 の値で指定します。

以下が円形のゲージを 0 から指定パーセンテージまでアニメーションして増加させる例です。

今回は指定した正方形のViewに円(楕円ではない!!)を描画させる例ですので、ご注意!

1. まず円を描画しておきます。

引数に円形ゲージを表示させたい正方形のviewを指定して drawCircle を実行するとアニメーションに利用する円を描画してくれます。

続いて、drawCircleAnimation でアニメの初期化をしておきます。


Swift

// CAShapeLayerインスタンスを生成

var circle: CAShapeLayer = CAShapeLayer()
// ※前提条件としてtargetViewが正方形であること
func drawCircle(targetView: UIView) {

// ゲージ幅
let lineWidth: CGFloat = 10

// 描画領域のwidth
let viewScale: CGFloat = targetView.size.width

// 円のサイズ
let radius: CGFloat = viewScale - lineWidth

// 円の描画path設定
circle.path = UIBezierPath(roundedRect: CGRectMake(0, 0, radius, radius), cornerRadius: radius / 2).CGPath

// 円のポジション設定
circle.position = CGPointMake(lineWidth / 2, lineWidth / 2)

// 塗りの色を設定
circle.fillColor = UIColor.clearColor().CGColor

// 線の色を設定
circle.strokeColor = UIColor.baseColor().CGColor

// 線の幅を設定
circle.lineWidth = lineWidth

// 該当のUIViewのlayerにsublayerとしてCALayerを追加
targetView.layer.addSublayer(circle)

// duration0.0のアニメーションにて初期描画(線が書かれていない状態)にしておく
drawCircleAnimation("strokeEnd", animeName: "updateGageAnimation", fromValue: 0.0, toValue: 0.0, duration: 0.1, repeat: 1.0, flag: false)

}



2. 線の描画にたいしてアニメーションを指定します。

下記がアニメーション部分の実装になります。

もろもろの設定値を引数にもたせて実行してくださいまし。

CABasicAnimationCATransaction など利用しない限り、viewにaddされた時点でアニメーションを開始します。

CATransaction に関してはまた後日、、


Swift

func drawCircleAnimation(key: String, animeName: String, fromValue: CGFloat, toValue: CGFloat, duration: NSTimeInterval, repeat: Float, flag: Bool) {

// アニメーションkeyを設定
drawAnimation = CABasicAnimation(keyPath: key)

// アニメーション間隔の指定
drawAnimation!.duration = duration // "animate over 10 seconds or so.."

// 繰り返し回数の指定
drawAnimation!.repeatCount = repeat // Animate only once..

// 起点と目標点の変化比率を設定 (0.0 〜 1.0)
drawAnimation!.fromValue = fromValue
drawAnimation!.toValue = toValue

// イージングを決定
drawAnimation!.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

// アニメ完了時の描画を保持
drawAnimation!.removedOnCompletion = false;
drawAnimation!.fillMode = kCAFillModeForwards;

// 逆再生の指定
drawAnimation!.autoreverses = flag

// Add the animation to the circle
circle.addAnimation(drawAnimation, forKey: animeName)

}



■ 所感

CABasicAnimation はプロパティに対してアニメーションを実行するが、アニメーション可能なプロパティのリストなどがあまり出回っていない。(Appleさんでも用意してないみない、、あったら教えてくださいw)

とはいえ全てのプロパティをアニメーションできるとは思えないので、ちょっと心配。

あとkey指定がStringなのもちょっと心配w

アニメーションの実行自体は比較的簡単でカスタマイズもしやすいです。

自分は上記に色んな付属の効果をつけて利用しています。