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

##■ 概要
円形にゲージが上がっていくアニメーションを、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に円（楕円ではない！！）を描画させる例ですので、ご注意！

１. まず円を描画しておきます。
引数に円形ゲージを表示させたい正方形の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)

}

---

２. 線の描画にたいしてアニメーションを指定します。
下記がアニメーション部分の実装になります。
もろもろの設定値を引数にもたせて実行してくださいまし。
CABasicAnimation は CATransaction など利用しない限り、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
アニメーションの実行自体は比較的簡単でカスタマイズもしやすいです。
自分は上記に色んな付属の効果をつけて利用しています。