IOS炫酷的引导界面

立即下载用AI写一个

发布时间：2017-08-19

2人 | 浏览：3723次 | 收藏 |

技术：object-c

运行环境：Xcode8

概述

开始做之前，首先思路要清晰，逻辑比较繁琐。而且这个demo用到的算法比较多

详细

### 一、准备工作
 >1.先用时ps工具制作好图片
 >2.然后计算好每张图片通过滑动视图的偏移量来改变图片的位置
 >3.理顺该demo将需要的一些逻辑顺序

### 二、程序实现
项目中不需要配置任何东西，全都是逻辑方面的东西，只要思维逻辑清楚，我们就开始干
![](/contentImages/image/20170818/AlotatNG9BTOHdmOyxt.png)
由上面可以知道，其实该demo的代码不是很大。

> 1、所有的图片的初始位置进行定义

```
-(void)createUI
{
    //1
    pageoneImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 40, ScreenWidth, 30)];
    pageoneImage1.image = [UIImage imageNamed:@"1_01"];
    [imageView1 addSubview:pageoneImage1];
    
    pageoneImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, ScreenWidth, ScreenWidth)];
    pageoneImage2.image = [UIImage imageNamed:@"1_02"];
    [imageView1 addSubview:pageoneImage2];
    
    pageoneImage3 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 120, ScreenWidth, ScreenWidth/4)];
    pageoneImage3.image = [UIImage imageNamed:@"1_03"];
    [imageView1 addSubview:pageoneImage3];
    
    pageoneImage4 = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth/6, CGRectGetMaxY(pageoneImage2.frame)+10, ScreenWidth*2/3, 50)];
    pageoneImage4.image = [UIImage imageNamed:@"1_04"];
    [imageView1 addSubview:pageoneImage4];
    
    pageoneImage5 = [[UIImageView alloc]initWithFrame:CGRectMake(40, CGRectGetMaxY(pageoneImage4.frame)+10, ScreenWidth-80, 40)];
    pageoneImage5.image = [UIImage imageNamed:@"1_05"];
    [imageView1 addSubview:pageoneImage5];
    
    //2
    pageoneImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 40, ScreenWidth, 30)];
    pageoneImage1.image = [UIImage imageNamed:@"1_01"];
    [imageView2 addSubview:pageoneImage1];
    
    pagetwoImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(-ScreenWidth/2, 100-ScreenWidth/2, ScreenWidth*2, ScreenWidth*2)];
    pagetwoImage1.image = [UIImage imageNamed:@"2_01"];
    [imageView2 addSubview:pagetwoImage1];
    
    pagetwoImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(pagetwoImage1.frame)+10, ScreenWidth, 60)];
    pagetwoImage2.image = [UIImage imageNamed:@"2_02"];
    [imageView2 addSubview:pagetwoImage2];
    
    pagetwoImage3 = [[UIImageView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(pagetwoImage2.frame)+10, ScreenWidth, 30)];
    pagetwoImage3.image = [UIImage imageNamed:@"2_03"];
    [imageView2 addSubview:pagetwoImage3];
    
    //3
    pageoneImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 40, ScreenWidth, 30)];
    pageoneImage1.image = [UIImage imageNamed:@"1_01"];
    [imageView3 addSubview:pageoneImage1];
    
    pagethreeImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(0, 100, ScreenWidth, ScreenWidth*31/36)];
    pagethreeImage1.image = [UIImage imageNamed:@"3_01"];
    [imageView3 addSubview:pagethreeImage1];
    
    pagethreeImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth, 100, ScreenWidth, ScreenWidth*31/36)];
    pagethreeImage2.image = [UIImage imageNamed:@"3_02"];
    [imageView3 addSubview:pagethreeImage2];
    
    pagethreeImage3 = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth/2, 100, ScreenWidth, ScreenWidth*31/36)];
    pagethreeImage3.image = [UIImage imageNamed:@"3_03"];
    [imageView3 addSubview:pagethreeImage3];
    
    pagethreeImage4 = [[UIImageView alloc]initWithFrame:CGRectMake(10, ScreenHeight, ScreenWidth-20, 60)];
    pagethreeImage4.image = [UIImage imageNamed:@"3_04"];
    pagethreeImage4.alpha = 0;
    [imageView3 addSubview:pagethreeImage4];
    
    pagethreeImage5 = [[UIImageView alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(pagethreeImage4.frame)+15, ScreenWidth, 40)];
    pagethreeImage5.image = [UIImage imageNamed:@"3_05"];
    pagethreeImage5.alpha = 0;
    [imageView3 addSubview:pagethreeImage5];
    
    //5
    pagefiveImage1 = [[UIImageView alloc]initWithFrame:CGRectMake(15, 50-300, ScreenWidth-30, 70)];
    pagefiveImage1.image = [UIImage imageNamed:@"5_01"];
    [imageView5 addSubview:pagefiveImage1];
    
    pagefiveImage2 = [[UIImageView alloc]initWithFrame:CGRectMake(55, CGRectGetMaxY(pagefiveImage1.frame)+10-300, ScreenWidth-110, 10)];
    pagefiveImage2.image = [UIImage imageNamed:@"5_02"];
    pagefiveImage2.alpha = 0;
    [imageView5 addSubview:pagefiveImage2];
    
    pagefiveImage3 = [[UIImageView alloc]initWithFrame:CGRectMake(ScreenWidth/4, ScreenHeight-ScreenWidth/2-60+300, ScreenWidth/2, ScreenWidth/4)];
    pagefiveImage3.image = [UIImage imageNamed:@"5_03"];
    pagefiveImage3.alpha = 0;
    [imageView5 addSubview:pagefiveImage3];
    
    pagefiveImage4 = [[UIImageView alloc]initWithFrame:CGRectMake(-ScreenWidth/2, ScreenHeight-ScreenWidth*5/4, ScreenWidth*4, ScreenWidth*4)];
    pagefiveImage4.image = [UIImage imageNamed:@"5_05"];
    pagefiveImage4.alpha = 0;
    [self rotate360DegreeWithImageView:pagefiveImage4];
    [imageView5 addSubview:pagefiveImage4];
    
    imgView = [[UIImageView alloc]initWithFrame:CGRectMake(50, ScreenHeight-ScreenWidth*4/5, 30-30, 30-30)];
    [self tomAnimationWithName:@"run" count:9];
    imgView.alpha = 0;
    [imageView5 addSubview:imgView];
}
```

>2、初始化scrollView

```
- (void)setupScrollView
{
    // 添加scrollView
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.frame = self.view.bounds;
    CGFloat contentW = scrollView.bounds.size.width * XXNewfeatureImageCount;
    [self.view addSubview:scrollView];
    
    scrollView.contentSize = CGSizeMake(contentW, 0);
    scrollView.pagingEnabled = YES;
    scrollView.bounces = NO;
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.delegate = self;
    
    // 添加图片
    CGFloat imageW = scrollView.bounds.size.width;
    CGFloat imageH = scrollView.bounds.size.height;
    
    imageView1 = [[UIImageView alloc] init];
    imageView1.frame = CGRectMake(0 * imageW, 0, imageW, imageH);
    [scrollView addSubview:imageView1];
    
    imageView2 = [[UIImageView alloc] init];
    imageView2.frame = CGRectMake(1 * imageW, 0, imageW, imageH);
    imageView2.alpha = 0;
    [scrollView addSubview:imageView2];
    
    imageView3 = [[UIImageView alloc] init];
    imageView3.frame = CGRectMake(2 * imageW, 0, imageW, imageH);
    [scrollView addSubview:imageView3];
    
    imageView5 = [[UIImageView alloc] init];
    imageView5.frame = CGRectMake(3 * imageW, 0, imageW, imageH);
    imageView5.userInteractionEnabled = YES;
    imageView5.alpha = 0;
    [scrollView addSubview:imageView5];
    
    // 添加跳转按钮
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(0, 0, 150, 30);
    [button setTitle:@"进入APP" forState:UIControlStateNormal];
    button.layer.borderWidth = 1.0;
    button.layer.borderColor = [UIColor colorWithWhite:0.915 alpha:1.000].CGColor;
    button.titleLabel.font = [UIFont systemFontOfSize:14.0];
    [button addTarget:self action:@selector(getstart) forControlEvents:UIControlEventTouchUpInside];
    CGFloat centerX = imageView5.bounds.size.width * 0.5;
    CGFloat centerY = imageView5.bounds.size.height - 88;
    button.center = CGPointMake(centerX, centerY);
    [imageView5 addSubview:button];
}
```

> UIScrollViewDelegate method

```
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    offsetX = scrollView.contentOffset.x;
    NSLog(@"%f",offsetX);
    int page = offsetX / scrollView.bounds.size.width + 0.5;
    
#pragma mark --- 此处写动画
    if (offsetX <= ScreenWidth/2) {
        [self firstPage];
    }
    else if (offsetX > ScreenWidth/2 && offsetX <= ScreenWidth+ScreenWidth/2) {
        [self secondPage];
    }
    else if (offsetX > ScreenWidth+ScreenWidth/2 && offsetX <= ScreenWidth*2+ScreenWidth/2) {
        [self thirdPage];
    }
    else if (offsetX > ScreenWidth*2+ScreenWidth/2 && offsetX <= ScreenWidth*3+ScreenWidth/2) {
        [self lastPage];
    }
    
    self.pageControl.currentPage = page;
}
```

> 3、gif的动画和旋转动画

```
#pragma mark --- UIImageView显示gif动画
- (void)tomAnimationWithName:(NSString *)name count:(NSInteger)count
{
    // 如果正在动画，直接退出
    if ([imgView isAnimating]) return;
    // 动画图片的数组
    NSMutableArray *arrayM = [NSMutableArray array];
    // 添加动画播放的图片
    for (int i = 0; i < count; i++) {
        // 图像名称
        NSString *imageName = [NSString stringWithFormat:@"%@%d.png", name, i+1];
        // ContentsOfFile需要全路径
        NSString *path = [[NSBundle mainBundle] pathForResource:imageName ofType:nil];
        UIImage *image = [UIImage imageWithContentsOfFile:path];
        [arrayM addObject:image];
    }
    // 设置动画数组
    imgView.animationImages = arrayM;
    // 重复1次
    imgView.animationRepeatCount = 0;
    // 动画时长
    imgView.animationDuration = imgView.animationImages.count * 0.05;
    // 开始动画
    [imgView startAnimating];
}

#pragma mark --- 旋转动画
- (void)rotate360DegreeWithImageView:(UIImageView *)imageView
{
    CABasicAnimation *animation = [ CABasicAnimation
                                   animationWithKeyPath: @"transform" ];
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    //围绕Z轴旋转，垂直与屏幕
    animation.toValue = [ NSValue valueWithCATransform3D:
                         CATransform3DMakeRotation(M_PI, 0.0, 0.0, 1.0) ];
    animation.duration = 5;
    //旋转效果累计，先转180度，接着再旋转180度，从而实现360旋转
    animation.cumulative = YES;
    animation.repeatCount = MAXFLOAT;
    //在图片边缘添加一个像素的透明区域，去图片锯齿
    CGRect imageRrect = CGRectMake(0, 0,imageView.frame.size.width, imageView.frame.size.height);
    UIGraphicsBeginImageContext(imageRrect.size);
    [imageView.image drawInRect:CGRectMake(1,1,imageView.frame.size.width-2,imageView.frame.size.height-2)];
    imageView.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    [imageView.layer addAnimation:animation forKey:nil];
}
```
### 三、运行效果
运行效果图如下图：
![ed.gif](/contentImages/image/jianshu/2495102-fb37d15bf2f6bda3.gif)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

IOS炫酷的引导界面

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子