最近因為需要,做了下嗶哩嗶哩動畫這個應用缤底。從數(shù)據顾患、素材的抓取、分類个唧、測試江解,到應用的基本功能實現(xiàn),確實用了一段時間徙歼。下面是做嗶哩嗶哩動畫的開機動畫效果的實現(xiàn)犁河。
![Uploading LuanchImage設置_552569.png . . .]](http://upload-images.jianshu.io/upload_images/2023147-b27b7518b9e7f8c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
從圖一到圖二,中間的人物從小到大魄梯,從透明到呈現(xiàn)的過程桨螺。
實現(xiàn)這個效果并不難,步驟如下
1.在LuanchImage設置開機圖片
2.使用CABasicAnimationGroup
實現(xiàn)動畫效果
這里創(chuàng)建了一個視圖控制器類LaunchViewController
酿秸,用于實現(xiàn)動畫效果灭翔。
設置兩個屬性,其中bgImageView
是背景圖辣苏,playImageView
是做動畫的圖片肝箱。
@property (nonatomic,strong)UIImageView *bgImageView;
@property (nonatomic,strong)UIImageView *playImageView;
給這兩個屬性懶加載
- (UIImageView *)bgImageView{
if(!_bgImageView){
_bgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
_bgImageView.image = [UIImage imageNamed:@"bilibili_splash_iphone_bg"];
}
return _bgImageView;
}
- (UIImageView *)playImageView{
if(!_playImageView){
_playImageView = [[UIImageView alloc] initWithFrame:CGRectMake(ScreenWidth/2, ScreenHeight/2-100, 1, 1.3)];
_playImageView.image = [UIImage imageNamed:@"bilibili_splash_default"];
}
return _playImageView;
}
在viewDidLoad
中把視圖添加上去
[self.view addSubview:self.bgImageView];
[self.bgImageView addSubview:self.playImageView];
[self performSelector:@selector(animationLunch) withObject:self afterDelay:0];
animationLunch
中實現(xiàn)組合動畫效果
- (void)animationLunch{
CGFloat duration = 1.5;
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scale.fromValue = @1;
scale.toValue = @(ScreenWidth - 40);
scale.duration = duration;
scale.repeatCount = 1;
scale.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacity.fromValue = @0;
opacity.toValue = @1;
opacity.duration = duration;
scale.repeatCount = 1;
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[scale,opacity];
animationGroup.duration = duration;
animationGroup.repeatCount = 1;
//如果是一個動畫CAAnimation,則需要將其removedOnCompletion設置為NO,要不然fillMode不起作用
animationGroup.removedOnCompletion = NO;
//決定當前在非active時間段的行為,比如動畫開始之前,動畫結束之后
animationGroup.fillMode =kCAFillModeForwards;
animationGroup.delegate = self;
[self.playImageView.layer addAnimation:animationGroup forKey:nil];
}
讓LaunchViewController
遵循代理哄褒,并實現(xiàn)CAAnimationDelegate
協(xié)議
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
[NSThread sleepForTimeInterval:2.0];
//移除開機動畫
[self.bgImageView removeFromSuperview];
}
這個類要做的事情完成了,回到AppDelegate
中煌张,導入剛創(chuàng)建的類頭文件呐赡,在application: didFinishLaunchingWithOptions:
中加入以下代碼,把動畫添加到場景中
_launchVC = [[LaunchViewController alloc] init];
//添加到場景
[self.window addSubview:_launchVC.view];
//放到最頂層
[self.window bringSubviewToFront:_launchVC.view];
[self performSelector:@selector(removeLunch) withObject:self afterDelay:2.0];
到此,嗶哩嗶哩動畫的開機動畫效果就實現(xiàn)了骏融。