7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

pathを使ったアニメーションで円のprogressViewを作ってみた

7
Last updated at Posted at 2015-01-14

iphonePlay_2015011401.gif

ソースはgithubに上げておきました。

CircleProgressViewSample

グラフをパイ型にするかドーナツ型にするかについては、CircleProgressViewのlineWidthというプロパティを0にすればパイ型、そうでないならドーナツ型になるようにしました。
後はトラックとプログレスの色、進捗の度合いをアニメーションするかどうかを選べるようにしておきました。

今回は参考になりそうなものを探していたら既に完成形みたいのが上がってたのでそれを元にpathアニメーション部分だけを抜き取ったような形で作ってみました。あくまで今回の目的はpathを使ったアニメーションを試す事だったので。

元ネタ
DACircularProgress

CALayerのサブクラス関係で調べたときに参考になったページ
CALayerを使って独自のプロパティをアニメーションさせる

補足ネタ

当初、CALayerのサブクラスをUIViewのサブクラスのinitメソッド内で呼び出して位置を指定したりしてたのですが、layerとviewの位置がずれるという現象が発生しました。どうもサブビューのframeの位置が決定するのはUIViewControllerのviewDidLayoutSubviewsが呼び出されたタイミングらしく、(つまりサブビューのinitメソッドはそれまでに呼び出されている)それまでにサブビュー内でframeをいじるのは良くないみたいです。

    override func viewDidLayoutSubviews() {
    }

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?