iOS App启动图--动画
2017-05-27 本文已影响539人
爬树的蚂蚁
从体验方面来看,一个好的App的启动图会给软件增色不少,给App加启动图,成本也不大,这篇文章,就来实现一下启动图动画效果,东西不多,仅App启动图+动画,下面马上开始
启动图
分两步
第一步,新建一个工程,里面会有LaunchScreen.storyboard这个文件,他就是为了方便我们设置启动图的。选择一张合适的尺寸的图片,拖入到项目中,建议最好用PNG格式的。
在LaunchScreen.storyboard中拖入一个UIImageView控件,做好约束,然后设置刚刚拖入的图片
第二步,设置设置启动图见下图
这样启动图就设置好了
启动动画
LaunchScreen.storyboard也就是启动图是最先展示给用户的,然后才能是启动动画。我们知道软件启动完成就会走Appdelegate的代理方法
-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
所以只要在这个方法中实现动画效果就可以了。
思路:展示启动图后,马上展示另外一张图片,并且这张图片在5秒内放大1.5倍,然后在2秒内消失。右上角放一个跳过按钮,显示倒计时
写代码的地方知道了,思路也知道了,直接上代码
先定义一个宏
#define timeIntence 5.0//图片放大的时间
添加按钮和图片
//使主窗口显示到屏幕的最前端
[self.window makeKeyAndVisible];
//获取中心点的xy坐标
float y = [UIScreen mainScreen].bounds.size.height/2;
float x = [UIScreen mainScreen].bounds.size.width/2;
//创建展示动画的imageView
self.imageView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.imageView.center = CGPointMake(x, y);
self.imageView.userInteractionEnabled = YES;
self.imageView.image = [UIImage imageNamed:@"启动图.jpg"];
[self.window addSubview:self.imageView];
[self.window bringSubviewToFront:self.imageView];
//添加一个跳过按钮
self.skipButton = [UIButton buttonWithType:(UIButtonTypeCustom)];
self.skipButton.frame = CGRectMake(2*x - 80, 40, 70, 25);
self.skipButton.layer.cornerRadius = 12.5;
self.skipButton.titleLabel.font = [UIFont systemFontOfSize:13];
[self.skipButton setTitleColor:[UIColor whiteColor] forState:(UIControlStateNormal)];
self.skipButton.backgroundColor = [UIColor grayColor];
[self.skipButton addTarget:self action:@selector(skipAction:) forControlEvents:(UIControlEventTouchUpInside)];
[self.window addSubview:self.skipButton];
按钮倒计时用到了一个库,需要引入头文件
#import<libkern/OSAtomic.h>
实现按钮的倒计时
//跳过按钮的倒计时
__block int32_t timeOutCount=timeIntence;
dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, 1ull * NSEC_PER_SEC, 0);
dispatch_source_set_event_handler(timer, ^{
OSAtomicDecrement32(&timeOutCount);
if (timeOutCount == 0) {
NSLog(@"timersource cancel");
dispatch_source_cancel(timer);
}
[self.skipButton setTitle:[NSString stringWithFormat:@"%d 跳过",timeOutCount+1] forState:(UIControlStateNormal)];
});
dispatch_source_set_cancel_handler(timer, ^{
NSLog(@"timersource cancel handle block");
});
dispatch_resume(timer);
图片放大和消失动画
//图片放大动画
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:timeIntence];
self.imageView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.5f, 1.5f);
[UIView commitAnimations];
//图片消失动画
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(timeIntence * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[UIView animateWithDuration:2 animations:^{
self.imageView.alpha = 0;
self.skipButton.alpha = 0;
}];
});
//所有动画完成,删除图片和按钮
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)((timeIntence + 2.0) * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.imageView removeFromSuperview];
[self.skipButton removeFromSuperview];
});
//点击跳过按钮,删除图片和按钮
-(void)skipAction:(UIButton*)sender{
[self.imageView removeFromSuperview];
[self.skipButton removeFromSuperview];
}
到此所有代码都写完了,是不是很简单,再附上demo下载地址
点击下载DEMO