by mixiappwchr
昨今iOSアプリケーション開発において、かっこよかったり気持ちのいいアニメーション、が目立つアプリが増えてきました。
ただ、愚直にアニメーションをiOS側で実装するとえらく大変です。。
以前こちらの記事でも書いたのですが、動画で先にアニメーションを作り、それをiOS側で利用するという手法を紹介したのですが具体的な利用の仕方を紹介します。
DeNA中の人が事例で語る、アニメーションやデザインのアプリを効率よく開発するためのTips #iOS
After Effectsからアニメーション用の素材を出力する
アニメーション自体の作り方は割愛します。 After Effects側ですごいアニメーションが作成できたら
レンダーキューを追加を選択して、動画の書き出しを設定します。
出力設定のオプションを開きます。
様々な形式に書き出すことができるのですが、今回は動画を連続した静止画で書き出します。
あとはレンダリングすれば以下のようなファイル群が書き出されるはずです。
iOS側でアニメーションを実装する
以下のようにCAKeyFrameAnimationを用います。
-(void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
// animationのセットアップ
self.splashLayer = [self createSplashLayer:@"splash_%05d" frameNumber:130 frameRate:30];
[self.splashContainer.layer addSublayer:self.splashLayer];
}
// animation layerの生成
-(CALayer*)createSplashLayer:(NSString*)baseformat frameNumber:(NSInteger)frameNumber frameRate:(float)frameRate{
CALayer *splashLayer = [CALayer layer];
splashLayer.frame = CGRectMake(0,0,200,200);
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"contents";
animation.duration = frameNumber/frameRate;
animation.removedOnCompletion = NO;
NSMutableArray *timing = [[NSMutableArray alloc] init];
NSMutableArray *images = [[NSMutableArray alloc] init];
for(int i = 0;i <= frameNumber;i++){
NSString *path= [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:baseformat,i] ofType:@"png"];
UIImage *image= [[UIImage alloc] initWithContentsOfFile:path];
[images addObject:(id)image.CGImage];
[timing addObject:[NSNumber numberWithFloat:(float)i/frameNumber]];
}
animation.keyTimes = timing;
animation.values = images;
animation.calculationMode = kCAAnimationDiscrete;
animation.repeatCount = 1;
animation.fillMode = kCAFillModeForwards;
animation.delegate = self;
[splashLayer addAnimation:animation forKey:@"splash"];
return splashLayer;
}
- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)flag
{
if(animation == [self.splashLayer animationForKey:@"splash"]){
// アニメーション後に何か処理を連携したい場合はこちらに記述
}
}
とこれだけでAfter Effects側で作成したアニメーションをiOS側に移植できます。
注意点として、動画サイズが大きいとメモリーを非常に食ってしまうので、一気に読み込まず、順々に表示するなど、もう少し調整処理が必要です。
この紹介したkeyframeanimationで表示する以外にも、After Effectsで作成した動画を直接AVPlayerなので再生するのもよいかと思っています。
やはり専用のアプリケーションを使って作成したアニメーションの方が遥かに工数がかからずアウトプットも品質が高い物がつくれます。
これを使ってスプラッシュアニメーションを実装したサンプルプロジェクトをおいてますので、興味がある方は触ってみてください。