Twitter風LaunchAnimationとは
Twitterアプリを立ち上げたときのアニメーションのこと
作りかた
ざっくり言うと
1. ViewControllerの遷移アニメーションを記述するクラスで、
2. 遷移先のViewControllerをTwitterアイコンの形にマスクして
3. 縮小拡大するアニメーションを書く
という感じです
1. ViewControllerの遷移アニメーションを記述する
iOS7からViewControllerの遷移アニメーションを記述できるようになったのでそれを利用します。custom transitionと呼ばれています。ネットで適当なサンプル拾って動かしてみると理解しやすいと思います。
例えば http://www.appdesignvault.com/custom-transition-ios-7/ とか
2. layer.maskを使う
CALayerのmaskプロパティにCALayerのインスタンスを代入するとその形状どおりにマスクされます。layer.maskを使って、遷移先画面をTwitterアイコンの領域だけ見えるようにします。
参考 http://lab.spec5zigen.com/archives/calayer/
CALayer *maskLayer = [CALayer layer];
maskLayer.contents = (id)[UIImage imageNamed:@"twitter"].CGImage;
maskLayer.contentsScale = [UIScreen mainScreen].scale;
CGFloat iconSize = 96;
maskLayer.frame = CGRectMake(toView.center.x - iconSize/2 , toView.center.y - iconSize / 2, iconSize, iconSize);
toView.layer.mask = maskLayer;
3. keyframe & scale animation
キーフレームアニメーションで時間ごとのアニメーションを指定します。scaleを使ってmasklayerを縮小させたり拡大させたりします。
CAKeyframeAnimation *animation= [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
animation.keyTimes = @[@0.0, @0.3, @1.0];
animation.values = @[
[NSValue valueWithCATransform3D:CATransform3DIdentity],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.7, 0.7, 1.0)],
[NSValue valueWithCATransform3D:CATransform3DMakeScale(70, 70, 1.0)]
];
CAMediaTimingFunction *linear= [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear];
CAMediaTimingFunction *easein= [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
animation.timingFunctions = @[linear, linear, easein];