.Sched 3 で予定をタップした時の背景をぼかすアニメーションの実装方法

.Sched 3 で予定をタップした時に、背景をぼかすアニメーションを実装してるのですが、今回はこの実装方法について紹介します。

紹介ビデオの　0:12,0:35,0:45あたりのやつです。


.Sched 2 の時も、メニュー表示時にこのアニメーションを利用してました。

 

どうやっているかというと、CALayerのCABasicAnimationで、rasterizationScaleの値を変化させています。

ボカシたいタイミング、ボカシをもどしたいタイミングで以下を実行します。

ボカシ処理開始時。

layer.shouldRasterize = YES;
CABasicAnimation *myAnimation = [CABasicAnimation animationWithKeyPath:@"rasterizationScale"];
myAnimation.fromValue = [NSNumber numberWithFloat:1.0];
myAnimation.toValue = [NSNumber numberWithFloat:0.07];
myAnimation.duration = 0.3;
//アニメーション終了時にエフェクトが元に戻らないようにしておく
myAnimation.removedOnCompletion = NO;
myAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:myAnimation forKey:@"myAnimation"];

 

ボカシを終了して戻す時

CABasicAnimation *myAnimation = [CABasicAnimation animationWithKeyPath:@"rasterizationScale"];
myAnimation.fromValue = [NSNumber numberWithFloat:0.07];
myAnimation.toValue = [NSNumber numberWithFloat:1.0];
myAnimation.duration = 0.3;
myAnimation.removedOnCompletion = NO;
myAnimation.fillMode = kCAFillModeForwards;
[layer addAnimation:myAnimation forKey:@"myAnimation"];

これだけです。

アニメーション適用対象レイヤーのレイヤーツリー配下の全てレイヤーがアニメーション対象となるため、フォーカスしたい部分は、指定レイヤーのレイヤーツリー配下にないようにしておく必要があります。

当初、予定詳細表示時のアニメーションとして、画面がパカーンと割れてスライドするアニメーション（iPhoneのフォルダを開いた時のアニメ）を実装したんですが、上下に割れる形にすると、パフォーマンス的にいまいちだし、思ったほどマッチしなかったので、今回のアニメーションに変更しました。