Core Animation 中級編

Posted at 2012-08-19

8/19担当、Qiita初投稿の@inamiyです、こんにちは。

今回は、iOS/OSXアプリのUXの根幹である「Core Animation」について、
ハマりやすい点や、意外と知られていないtipsなどについて書きたいと思います。

アニメーション完了時のコールバック

Delegateでif分岐しながら処理する方法もありますが、
[CATransaction setCompletionBlock:]を使う方が、より見通しの良いコードになります。

問題は、アニメーションが正常終了したかどうかのfinishedフラグがないという点ですが、
下記のようなコードを書くと、上手く判別できます。

[CATransaction begin];
[CATransaction setCompletionBlock:^{

    CAAnimation* animation = [layer animationForKey:@"myAnimation"];

    if (animation) {
        // -animationDidStop:finished: の finished=YES に相当

        [layer removeAnimationForKey:@"myAnimation"]   // 後始末
    }
    else {
        // -animationDidStop:finished: の finished=NO に相当
    }

}];

CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"position.x"];
animation.duration = 3;
animation.byValue = [NSNumber numberWithDouble:100.0];

// completion処理用に、アニメーションが終了しても登録を残しておく
animation.removedOnCompletion = NO; 
animation.fillMode = kCAFillModeForwards;

[layer addAnimation:animation forKey:@"myAnimation"];

[CATransaction commit];

もし、CATransactionで毎回wrapするのが気に入らない場合は、
animationのdelegateオブジェクトを保持してblocksを実現する方法もあります。
CAAnimationBlocksというライブラリを使えば、CAAnimation毎に、
-setCompletion:でblockを登録することができます。

https://github.com/xissburg/CAAnimationBlocks

アニメーションを一時中断する

Technical Q&A QA1673: How to pause the animation of a layer treeが参考になります。
（下記例は CALayerのカテゴリで実装しています）

@implementation CALayer (TheWorld)

- (void)pauseAnimations 
{
    CFTimeInterval pausedTime = [self convertTime:CACurrentMediaTime() fromLayer:nil];
    self.speed = 0.0;    // 時よ止まれ
    self.timeOffset = pausedTime;
}

- (void)resumeAnimations
{
    CFTimeInterval pausedTime = [self timeOffset];
    self.speed = 1.0;    // そして時は動き出す
    self.timeOffset = 0.0;
    CFTimeInterval timeSincePause = [self convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    self.beginTime = timeSincePause;
}

ここで、CAAnimationのbeginTimeは通常、
親のCAAnimationGroupの時間軸におけるオフセットとして各animationに対して設定しますが、
上記例のようにグループを使わない場合は、レイヤー自体が親になるので、
CACurrentMediaTime()を使ってレイヤー時間に変換して計算する必要があります。

fillModeについて

普段、何気なく使っている（かもしれない）下記のおまじない

// よく分からないけど、アニメーションが終了してもちゃんと残る
animation.removedOnCompletion = NO; 
animation.fillMode = kCAFillModeForwards;

ですが、これもCAAnimationGroupを使って考えると分かりやすいです。

例えば、

CABasicAnimation* animation = [CABasicAnimation animationForKeyPath:@"position.x"];
animation.beginTime = 3;
animation.duration = 5;
animation.byValue = [NSNumber numberWithDouble:100.0];

CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObject:animation];
group.duration = 10;
[layer addAnimation:group forKey:@"myGroupAnimation"];

を実行した場合、t=3〜8秒の間はアニメーションが実行されて表示されますが、
0〜3秒と8〜10秒は特に指定がなく、あいまいな状態になっています。
この場合、animation.fillModeの設定によって、

kCAFillModeRemoved ・・・表示しない（デフォルト）
kCAFillModeForwards・・・8〜10秒が終状態として表示される
kCAFillModeBackwards・・・0〜3秒が始状態として表示される
kCAFillModeBoth・・・backwards+forwards
kCAFillModeFrozen・・・（OSX 10.5でDeprecated）

となります。

なので、もしgroupを使わず、かつanimationのbeginTimeがデフォルトの0の
（前節のように、がんばって変換して代入でもしない）場合、
fillModeにforwards以外を設定する意味は特にないので、
基本的に上記おまじないを「使う」か「使わない」かの2択で考えて良いでしょう。
（使う場合は、あとでしっかり後始末しましょう）

暗黙的アニメーションが内部でやっていること

AppleのドキュメントCALayer Class Referenceによると、
暗黙的アニメーション（implicit animation）を実行したとき、
内部ではCALayerの-actionForKey:が呼ばれ、
下記の順番でid <CAAction>オブジェクト（実質CAAnimation）を探索します。

layer.delegateの-actionForLayer:forKey:
layer.actions
layer.style
[CALayer defaultActionForKey:]

(途中で[NSNull null]が来ると探索をストップしてnil扱いになる)

もし、id <CAAction>オブジェクトが見つかった場合、-runActionForKey:object:arguments:が実行され、
これが

// selfは(id <CAAction>)オブジェクト、objectはlayer
[object addAnimation:self forKey:actionKey];

相当のコードを実行します。

ここで、Core Animationの特殊な挙動として、
もしCAPropertyAnimation (CAAnimationのサブクラス)に
keyPathが設定されないまま-addAnimation:forKey:が実行された場合、
そこで使われたanimationKeyがそのままkeyPathに代入されるので、例えば、

layer.opacity = 0.5

という暗黙的アニメーションを実行したら、
layer.animationKeysにopacityキーが登録されつつ、opacity値を変化させるアニメーションが実行されます。

暗黙的アニメーションをデフォルトでOFFにする

毎回、[CATransaction setDisableActions:YES]を書くのは面倒なので、
前節の手順のどこかで[NSNull null]を渡してあげると良いです。
その場で簡単にセットできるのは、2.の方法になります。

layer.actions = [NSDictionary dictionaryWithObjectsAndKeys:
                 [NSNull null],@"onOrderIn",    // visibleになったときのフェードイン
                 [NSNull null],@"onOrderOut",   // invisibleになったときのフェードアウト
                 [NSNull null],@"sublayers",
                 [NSNull null],@"contents",
                 [NSNull null],@"position",
                 [NSNull null],@"bounds",
                 [NSNull null],@"transform",
                 nil];

なお、UIViewがwrapしているレイヤー(view.layer)が暗黙的アニメーションをしないのは、1.の方法によるもので、
view.layer.delegate(=view)が-actionForLayer:forKey:内で常にNSNullを返すためです。

カスタムプロパティをanimatableにする

CALayerのサブクラスを作り、+needsDisplayForKey:、
-actionForKey:、-drawInContext:をオーバーライドして、
再描画を繰り返すと、animatableに見せることができます。

@implementation MyLayer

+ (BOOL)needsDisplayForKey:(NSString*)key
{
    if ([key isEqualToString:@"angle"]) {
        return YES;
    }

    return [super needsDisplayForKey:key];
}

- (id <CAAction>)actionForKey:(NSString*)key
{
    if ([key isEqualToString:@"angle"]) {

        CABasicAnimation* animation = [CABasicAnimation animation];
        animation.duration = 1;	// デフォルトを通常(0.25)より少し遅めにセット
        return animation;

    }

    return [super actionForKey:key];
}

- (void)drawInContext:(CGContextRef)context
{
	// angle値に応じて描画する
}

@end

おわりに（ライブラリ紹介）

以前、Core Animationを使って、起動画面（スプラッシュ）を好きなようにトランジションさせながら
アプリを開始する簡単なクラスを書いたので、良かったら使ってみてください。

https://github.com/inamiy/YISplashScreen

その他にも、アニメーションまわりの良ライブラリを、いくつか紹介します。

下2つは特に有名ですね。ぜひ、お時間のあるときにソースを読んでみましょう。

では、良い月曜日を！

244

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up