[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で位置やサイズを変更します。

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

[iOS] UIViewをゆっくりと隠す

参考元：iPhoneSDKのUIViewアニメーション

UIViewの派生ビューであれば、簡単にできます。

読み込み待ちをメッセージ表示するのに利用しました。

読み込み中であれば、次のビューを表示します。

ただ、読み込みが一瞬で完了すると、すぐに消えてしまい、何が表示されてたかわかりません。
そこで、一瞬で完了しても、ゆっくりと非表示にするようにします。

そのソースが以下になります。

if (isHidden) {// 非表示有無

    // ゆっくりと隠す

    CGContextRef context = UIGraphicsGetCurrentContext();

    [UIView beginAnimations:nil context:context];

    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

    [UIView setAnimationDuration:0.5f];// アニメーションを完了させる時間

    [self.waitView setAlpha:0.0f];// アニメーション内容(非表示)

    [UIView commitAnimations];

} else {

    // すぐに表示

    [self.waitView setAlpha:1.0f];// アニメーション内容(表示)

}

たった数行書くだけで、アニメーションを実現できるって、フレームワークの機能は充実してますね。

[iOS] Core Graphics

Core Graphicsがどんなものか、簡単な描画をしてみる。

■黒線で円を二つ描画してみる。

UIViewのサブクラスに次のソース付け足すだけです。

- (void)drawRect:(CGRect)rect

{

//現在のグラフィックスコンテキストを取得

CGContextRef cgContext = UIGraphicsGetCurrentContext();

//ストロークカラーの設定(0.0-1.0でRGBAを指定する)

CGContextSetRGBStrokeColor(cgContext, 0.0, 0.0, 0.0, 1.0);

//ストロークの線幅を設定

CGContextSetLineWidth(cgContext, 2.0);

//カレントポイントから指定した座標に向けて線を引く

CGContextStrokeEllipseInRect(cgContext, CGRectMake(10.0, 10.0,10.0,10.0));

//パスに円を追加

CGContextAddEllipseInRect(cgContext, CGRectMake(30.0, 30.0, 60.0, 60.0));

//画面に描画

CGContextStrokePath(cgContext);

}

グラフィックスコンテキストを取得して、描画したい内容を付け足すだけで、手軽にできそうです。

基本はわかったので、次はもうちょっと複雑な描画をやってみます。