[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に設定して読んであげれば、アニメーションは完成！

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

[iOS] CALayerの角を丸める

前回、CALayerでグラデーションレイヤーを作成して、UIViewに表示させてみた。

今回は、レイヤーの角を丸める機能があったので試してみる。

// 角を丸める(CALayer *layer)

[layer setMasksToBounds:YES];

[layer setCornerRadius:5.0f];

たった2行でできちゃう。

CALayer便利だな。

[iOS] CALayerを使ってみる

UIViewをカスタマイズして、カスタムコントローラを作ろうと思っています。

【目標】
・単純なプログレスバー
・表示はグラデーションでバーを表示して、伸びるときはアニメーション

CoreGraphicsでUIView内に描画しようと考えていましたが、CALayerという機能があるので試してみる。

UIView内に、階層的にレイヤーを追加して、表示を管理できるみたいです。
アニメーションさせたりできるみたいです。

最初に、レイヤー内にグラデーションで四角形を描画して、UIViewに追加してみた。

// レイヤー作成

CALayer* subLayer = [CALayer layer];

subLayer.frame = CGRectMake(0, 0, 200, 30);

// オフスクリーンに描画

UIGraphicsBeginImageContext(CGSizeMake(50, 50));

// グラデーションで描画する

CGContextRef context = UIGraphicsGetCurrentContext();

CGColorSpaceRef colorspace;

CGGradientRef gradient;

CGFloat locations[2]  = { 0.0, 1.0 };

CGFloat components[8] = {

0.290, 0.478, 0.710, 1.0,

0.427, 0.600, 0.804, 1.0

};

colorspace = CGColorSpaceCreateDeviceRGB();

gradient   = CGGradientCreateWithColorComponents (colorspace, components, locations, 2);

CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(50, 50), 0);

// オフスクリーン内容をUIImageに変換する

UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

// オフスクリーン描画を終了

UIGraphicsEndImageContext();

// レイヤーに画像をセットする

subLayer.contents = (id)img.CGImage;

// ビューのレイヤーに追加

[self.layer addSublayer:subLayer];

オフスクリーンで作成した画像をレイヤーにセットして、CALayerのframeで位置やサイズを変更します。

これで、プログレスバーの表示部分はできそうだ。
次は、アニメーションでバーを伸ばしたりするところをやってみよう。