Help us understand the problem. What is going on with this article?

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

More than 5 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
アニメーションの実行自体は比較的簡単でカスタマイズもしやすいです。
自分は上記に色んな付属の効果をつけて利用しています。

 

rc_code
フロントエンド / iOS エンジニア。 Javascript / Swift を中心としたインタラクティブコンテンツの製作。 UI・UXにも関心あり。
https://rc-code.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした