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

上一篇下一篇

猜你喜欢

热点阅读