怎样做一个iOS App的启动分层引导动画？

标签：ios   objective c   scrollview   

一. 为什么要写这篇文章？

这是一个很古老的话题，从两年前新浪微博开始使用多层动画制作iOS App的启动引导页让人眼前一亮（当然，微博是不是历史第一个这个问题值得商榷）之后，各种类型的引导页层出不穷，到如今，github上也有了各种的成型的library存在供选择，同事不少app也已经慢慢的开始返璞归真回归单一静态引导页。虽然时尚的潮流不停的在变化，但是我一直在思索，这种多图层的启动引导动画到底是什么个结构？实现起来究竟有多难？本文，将试图探寻这个话题。

二. 我们要做成什么样子的？

三. 用什么控件做？

四. 怎么做？

1. 首先我们要把我们承载整个动画场面的scrollView造出来。

//初始化 scrollview
- (void)initScrollView
{
    CGSize screenSize = [UIScreen mainScreen].bounds.size;
 
    _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.width, screenSize.height)];
//我们的scrollView的frame应该是屏幕大小
    _scrollView.contentSize = CGSizeMake(screenSize.width * 4, screenSize.height);
//但是我们希望我们scrollView的可被展现区域是4个屏幕横排那么大
    _scrollView.alwaysBounceHorizontal = YES;//横向一直可拖动
    _scrollView.pagingEnabled = YES;//关键属性，打开page模式。
    _scrollView.delegate = self;
    _scrollView.showsHorizontalScrollIndicator = NO;//不要显示滚动条~
    
    [self.view addSubview:_scrollView];
}

2. 加入页面元素

@interface ViewController ()<UIScrollViewDelegate>
 
@property (strong, nonatomic) UIScrollView *scrollView;//这是基本！
 
@property (strong, nonatomic) UIImageView *girlImageView;
@property (strong, nonatomic) UILabel *label_page1_1;
@property (strong, nonatomic) UILabel *label_page1_2;
@property (strong, nonatomic) UILabel *label_page1_3;
 
@end

//为了更方便的初始化UILabel,我为UILabel增加了一个简易的类方法。是为了让代码更简洁可读。
+ (instancetype)labelWithText:(NSString *)text font:(UIFont *)font color:(UIColor *)color origin:(CGPoint)origin
{
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(origin.x, origin.y, 1000, 20)];
    label.text = text;
    label.font = font;
    label.textColor = color;
    [label sizeToFit];
    return label;
}
 
//然后我们将第一页的元素加进来。
 
    self.label_page1_1 = [UILabel labelWithText:@"我要买iPhone6！" font:[UIFont systemFontOfSize:18.0f] color:[UIColor redColor] origin:CGPointMake(140, 200)];
    [self.scrollView addSubview:self.label_page1_1];
 
    self.label_page1_2 = [UILabel labelWithText:@"我要看医生演唱会~~~~" font:[UIFont systemFontOfSize:18.0f] color:[UIColor blackColor] origin:CGPointMake(140, 240)];
    [self.scrollView addSubview:self.label_page1_2];
 
    self.label_page1_3 = [UILabel labelWithText:@"我要去大理！" font:[UIFont systemFontOfSize:18.0f] color:[UIColor orangeColor] origin:CGPointMake(140, 280)];
    [self.scrollView addSubview:self.label_page1_3];
    
    self.girlImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_girl"]];
    self.girlImageView.frame = CGRectMake(100, kScreenHeight - 200 - 50, 100, 200);
   [self.scrollView addSubview:self.girlImageView];

3. 让第一页动起来~~

    self.girlImageView.transform = CGAffineTransformMakeTranslation(-200, 0);
    self.label_page1_1.transform = CGAffineTransformMakeTranslation(- 100, 0);
    self.label_page1_2.transform = CGAffineTransformMakeTranslation(100, 0);
    self.label_page1_3.transform = CGAffineTransformMakeTranslation(- 120, 0);
    
    [UIView animateWithDuration:0.7
                     animations:^{
                         self.girlImageView.transform = CGAffineTransformMakeTranslation(0, 0);
                         self.label_page1_1.transform = CGAffineTransformMakeTranslation(0, 0);
                         self.label_page1_2.transform = CGAffineTransformMakeTranslation(0, 0);
                         self.label_page1_3.transform = CGAffineTransformMakeTranslation(0, 0);
                     }];

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat currentX = scrollView.contentOffset.x;
    
    if (currentX <= kScreenWidth)
    {
        self.girlImageView.transform = CGAffineTransformMakeTranslation((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);
        self.label_page1_2.transform = CGAffineTransformMakeTranslation(- 200 * currentX / kScreenWidth, 0);
    }
}

        self.girlImageView.transform = CGAffineTransformMakeTranslation((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

        self.label_page1_2.transform = CGAffineTransformMakeTranslation(- 200 * currentX / kScreenWidth, 0);

五. 总结

点击查看demo

怎样做一个iOS App的启动分层引导动画？

标签：ios   objective c   scrollview   

原文地址：http://blog.csdn.net/chentoo/article/details/41864437