CATextLayerは文字列を表示するレイヤ。表示する文字列、フォント、フォントサイズ、文字色なんかを指定できる。単純なものならこんな感じか。
- (void)awakeFromNib
{
CATextLayer *textLayer=[CATextLayer layer]; // テキストレイヤ作成
textLayer.string = @"Test Text"; // 表示する文字列
textLayer.font = @"Lucida-Grande"; // フォント
textLayer.fontSize = 48; // 文字の大きさ
textLayer.foregroundColor=CGColorCreateGenericRGB(1.0,0.25,0.5,1.0); // 文字色
textLayer.frame = CGRectMake(100, 200, 300, 50); // レイヤ矩形
[view setLayer:textLayer];
[view setWantsLayer:YES];
}
で、これで興味深いのがtextLayer.frameへの設定が効果無いこと。
CGRectMake(100, 200, 300, 50)
だろうが
CGRectMake(0, 0, 0, 0)
だろうが変化無し。
以下のように仮のレイヤを作って、これのサブレイヤにすると効果が出る。
[view setLayer:textLayer];
CALayer* baseLayer = [CALayer layer]; // レイヤーを作成する
[view setLayer:baseLayer];
[baseLayer addSublayer:textLayer];
今回は文字列を回転させてみる。
回転にはanimationWithKeyPath:@"transform"を使う。fromValue、toValueにはvalueWithCATransform3DによってCATransform3Dを指定することになる。
CATransform3D transform = CATransform3DIdentity;
で何も形状を変更しない値を作りfromValueに設定。もう一つは形状を、指定した軸をに対し、指定したラジアン度分回転させる値を作り
transform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0);
これをtoValueに設定してtextLayer addAnimationする。
transform_animation.toValue = [NSValue valueWithCATransform3D:transform];
[textLayer addAnimation:transform_animation forKey:@"tfAnimation"];
ついでに今まで使ったフェードアウトも合成。その名のとおりaddAnimationはアニメーションを追加できる。
CABasicAnimation* opacity_animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
・
opacity_animationを設定
・
[textLayer addAnimation:opacity_animation forKey:@"opAnimation"];
サンプルプロジェクトを以下に用意したんで、いろいろパラメータを変えて試してちょうだい。
CATransform3Dなどの情報はCore Animation プログラミングガイド 日本語訳版からたどっていくといい。
------------
サンプルプロジェクト：animation-text.zip
Core Animation プログラミングガイド 日本語訳版
- (void)awakeFromNib
{
CATextLayer *textLayer=[CATextLayer layer]; // テキストレイヤ作成
textLayer.string = @"Test Text"; // 表示する文字列
textLayer.font = @"Lucida-Grande"; // フォント
textLayer.fontSize = 48; // 文字の大きさ
textLayer.foregroundColor=CGColorCreateGenericRGB(1.0,0.25,0.5,1.0); // 文字色
textLayer.frame = CGRectMake(100, 200, 300, 50); // レイヤ矩形
[view setLayer:textLayer];
[view setWantsLayer:YES];
}
で、これで興味深いのがtextLayer.frameへの設定が効果無いこと。
CGRectMake(100, 200, 300, 50)
だろうが
CGRectMake(0, 0, 0, 0)
だろうが変化無し。
以下のように仮のレイヤを作って、これのサブレイヤにすると効果が出る。
[view setLayer:textLayer];
CALayer* baseLayer = [CALayer layer]; // レイヤーを作成する
[view setLayer:baseLayer];
[baseLayer addSublayer:textLayer];
今回は文字列を回転させてみる。
回転にはanimationWithKeyPath:@"transform"を使う。fromValue、toValueにはvalueWithCATransform3DによってCATransform3Dを指定することになる。
CATransform3D transform = CATransform3DIdentity;
で何も形状を変更しない値を作りfromValueに設定。もう一つは形状を、指定した軸をに対し、指定したラジアン度分回転させる値を作り
transform = CATransform3DMakeRotation(M_PI, 1.0f, 0.0f, 0);
これをtoValueに設定してtextLayer addAnimationする。
transform_animation.toValue = [NSValue valueWithCATransform3D:transform];
[textLayer addAnimation:transform_animation forKey:@"tfAnimation"];
ついでに今まで使ったフェードアウトも合成。その名のとおりaddAnimationはアニメーションを追加できる。
CABasicAnimation* opacity_animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
・
opacity_animationを設定
・
[textLayer addAnimation:opacity_animation forKey:@"opAnimation"];
サンプルプロジェクトを以下に用意したんで、いろいろパラメータを変えて試してちょうだい。
CATransform3Dなどの情報はCore Animation プログラミングガイド 日本語訳版からたどっていくといい。
------------
サンプルプロジェクト：animation-text.zip
Core Animation プログラミングガイド 日本語訳版