美文网首页
iOS App启动图--动画

iOS App启动图--动画

作者: 爬树的蚂蚁 | 来源:发表于2017-05-27 16:31 被阅读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

    相关文章

      网友评论

          本文标题:iOS App启动图--动画

          本文链接:https://www.haomeiwen.com/subject/qpsqfxtx.html