[iOS] CALayerをアニメーションでうごかす

前回、CALayerにグラデーションレイヤーを作成して、レイヤーの角を丸めてみた。

プログレスバーを作るんだから、バーが伸びないといけないですよね。
アニメーション機能を使って、バーの伸び縮みを機能をつけます。

前回作成したレイヤーを工夫して、背景レイヤーと前景レイヤーの二枚を作りました。

背景レイヤーは、プログレスバーの枠だったり、背景部分になります。
前景レイヤーは、バーを表現する部分になります。

両方のレイヤーを横長にして重ねて、UIViewに追加します。

アニメーションの機能を使って、前景レイヤーの横方向の拡大率を少しずつ変化させます。
アニメーションは、CABasicAnimationクラスを使って、前景レイヤーのプロパティ(値)を変化させます。

次のプログラムで、前景レイヤーの横方向の拡大率を1.0倍から0.5倍に変化させます。

CABasicAnimation* animation = [CABasicAnimation
animationWithKeyPath:@"transform.scale.x"];
animation.duration     = 1.0f;

animation.autoreverses = YES;
animation.repeatCount  = 1;
animation.fromValue = [NSNumber numberWithDouble:1.0];
animation.toValue   = [NSNumber numberWithDouble:0.5];
[layer addAnimation:animation forKey:@"opacityAnimation"];

このままでは、レイヤーの中央を起点に縮小アニメーションしてしまいます。
左右から縮んでしまいます・・・。

起点を左上にするために、レイヤーのアンカー点を変更します。

layer.anchorPoint = CGPointMake(0, 0);

これでばっちりです。

バーの%値が設定されたときに、アニメーションプログラムのfromValueとtoValueに設定して読んであげれば、アニメーションは完成！

あとはバーの%値の保持などを組み込めば、プログレスバーの完成！