http://www.cocoachina.com/ios/20141211/10610.html

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

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

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

首先定下目标，我们要实现的是启动引导画面中的一种——多层次动画。然后我们需要设定一个动画的主题，我们需要表达我们的情感，或者抒情~或者动人~或者逗比~。当然这大部分是设计师的工作。
好吧，既然是demo，而我又不懂设计又不懂美学又不懂PS大法，那么，就大概也许做成一个这样子的把~~~

总结一下最终目标要有几个要点：
1、4个页。
2、每个页都可能有若干分层，动画速度不同。
3、整个滑动的手感应该是顺滑并且是页面式的。

三. 用什么控件做？

开头我讲过，这是要探索，而不是为了实现，所以绝对不能借助任何3rd的library来完成。最大限度的利用apple的原生控件，是解决问题之道。

So，我们当然选用UIScrollView咯~~~除非你是个手工控。。。就要用最基本的UIView实现一个类似的滑动效果的UIScrollView。

啥？你问我UIScrollView是啥？

。。。。。。

下面是UIScrollView的几个关键属性，我相信你是明白的。需要注意的是，伴随着scrollview的左右拖动，contentOffset是在一直变换的。数值范围:(0,0) – (320 * 3, 0)。而这个属性，是我们需要使用的关键数值。

四. 怎么做？

上面我啰嗦了半天，最后告诉大家要用UIScrollView做，那么问题来了，挖掘机技术哪家强？啊不，到底应该怎么做？下面是干货~

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

如下，需要设置scrollView的几个关键属性：frame, contentSize, alwaysBounceHorizontal, paginEnabled(这个如果是NO，那么页面间的弹性效果就没了), delegate(需要设置从而获取scrollview的滚动状态)等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//初始化 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. 加入页面元素

还是不要全篇幅贴代码了，以第一页为例把。
前面掉渣天的蛇鸡屎（我）的demo图已经表明，第一页，我们要有3个UILabel，一个UIImageView。
那么好，这些元素我们就给他声明出来。

1
2
3
4
5
6
7
8
9
@interface ViewController () 
@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

然后把第一页的元素，加进来~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//为了更方便的初始化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. 让第一页动起来~~

在第一页刚刚显示的时候，我们就希望第一页的元素能够有一个动起来的效果。那我们在上面刚刚加入第一页元素之后，可以紧接着做下面的事情：

1
2
3
4
5
6
7
8
9
10
11
12
    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);
                     }];

可以看到，我们分别给第一页的四个元素不同的水平位移，然后希望它用0.7秒的时间，移动到之前init他们时候的位置。这样就完成了第一个4层的错位动画。

然后，我们希望在手指滑动scrollview 的时候，第一页的四个元素可以有相应的分层错位动画，那么我们第一需要拿到当前scrollView的位移量，也就是前面提到的很重要的contentOffset。这个值，在：

1
- (void)scrollViewDidScroll:(UIScrollView *)scrollView

中，可以实时的获取。

具体来看，怎么做。

1
2
3
4
5
6
7
8
9
10
- (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);
    }
}

呵呵，是不是看不懂，那就对了。。。

下面解释下，首先抛出两个定理：

定理一：在scrollview的滑动过程中，视觉上看，scrollview上的元素的移动方向与手指滑动方向相反，并且移动的距离与手指滑动的距离相等。但所有元素在scrollview上的物理位置并未改变。

定理二：在scrollview的滑动过程中，当且仅当scrollview上的元素的物理移动距离与手指滑动距离相等并且移动方向相反时，scrollview的元素视觉位置保持不变。

然后我们有两个需求：

第一，希望那个小女孩跟随手指滑动的时候，视觉上不是向左移动一直到消失，而是向右移动，待滑动到第二页的时候，小女孩出现在屏幕右侧。

我们应该明确，小女孩的移动，只能是在scrollview上位置的移动。根据定理二，我们知道，如果保持视觉上小女孩位置不变，小女孩在scrollView上的实际物理位移应该是：

公式 4.3.1 baseDistance = kScreenWidth 屏幕宽度

那么如果我们希望在移动到第二页之后，小女孩的视觉位置右移了100像素，那么小女孩在scrollView上的实际物理位移应该是：

公式 4.3.2 distance = baseDistance + 100

第一页到第二页，scrollView一共位移是 kScreenWidth ，当前scrollView位移是 contentOffset.x ,可以得出，当前位移的比例：

公式 4.3.3 status = scrollView.contentOffest.x / distance

由 4.3.1 4.3.2 4.3.3可得，我们设置小女孩位移的方式：

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

第二个需求，希望第一页中，第二个label的向左移动速度快于其他两个label。

根据定理二，和类似于上面的推倒(推导)方式，也易得第二个label的位移方式：

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

五. 总结

综上所述，我们知道了分层动画的基本原理。如果使用更多的图层，更多的位移或者角度变化，就能组合出更加复杂的分层动画。

可以看到，分层动画的基本原理并不复杂，但是为什么那么多人倾向于借助3rd的library来实现呢？一个字，懒。

现如今移动开发领域对于美感和交互的要求越来越高，而开发出一款精美的app，设计师所需要付出的灵感和努力也越发显得重要。作为一个不怎么有美感的iOS工程师，想要在移动浪潮中立于不败之地，不断尝试更多新的可能远比实现更多的功能更加重要。

最后的最后，附一个demo运行效果：

点击查看demo

怎样做一个iOS App的启动分层引导动画相关推荐

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

    一. 为什么要写这篇文章? 这是一个很古老的话题,从两年前新浪微博开始使用多层动画制作iOS App的启动引导页让人眼前一亮(当然,微博是不是历史第一个这个问题值得商榷)之后,各种类型的引导页层出不穷 ...

  2. iOS疯狂详解之启动分层引导动画

    一. 为什么要写这篇文章? 这是一个很古老的话题,从两年前新浪微博开始使用多层动画制作iOS App的启动引导页让人眼前一亮(当然,微博是不是历史第一个这个问题值得商榷)之后,各种类型的引导页层出不穷 ...

  3. iOS动手做一个直播app开发(代码篇)

    iOS动手做一个直播app开发(代码篇) ###开篇 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量都不错的文 ...

  4. 如何用 React Native 创建一个iOS APP？（二）

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

  5. 单枪匹马：4年只做一个iOS游戏 收入破千万美元

    2011 年,一款叫做<Tiny Wings>的手游被苹果推荐为最佳 iPhone 游戏,对手游市场有所了解的同学一定会赞同<Tiny Wings>是过去几年中全球知名度仅次于 ...

  6. android 揭示动画,Android进阶设计 | 使用揭露动画（Reveal Effect）做一个丝滑的Activity转场动画...

    提笔之际(附总体思路) 最近跟几个小伙伴在实践一个项目,考虑到界面效果,我们决定使用揭露动画作为Activity的转场动画. 这里主要是我负责这部分的实现. 话说之前是没接触过的,关于具体的实现跟大体 ...

  7. css3 做一个会动的菜单 menu 按钮动画效果

    css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是 三 这样的菜单图标 ...

  8. iOS app的启动优化

    返回上级目录:iOS面试专题一 文章目录 1.冷启动分为两个阶段:main函数之前和之后 2.pre-main阶段 2.1 Load dylibs image:加载动态库 2.2 Rebase/Bin ...

  9. 深入理解iOS App的启动过程

    前言 启动时间是衡量应用品质的重要指标. 本文首先会从原理上出发,讲解iOS系统是如何启动App的,然后从main函数之前和main函数之后两个角度去分析如何优化启动时间. 准备知识 Mach-O 哪 ...

最新文章

  1. pthread_cond_wait() 函数的使用
  2. 14.线程安全？线程不安全？可重入函数？不可重入函数？
  3. 成功解决ValueError: Data is not binary and pos_label is not specified
  4. 路由器上不了网？PPPoE协议了解一下
  5. 谷歌提出 RNN 版 Transformer，或为长文本建模的当前最优解
  6. 机器学习笔记（常见算法）
  7. 这位教授2 年一篇 Science，再获教科书级的重大发现
  8. python findcontours_基于Python的opencv学习练习（十二） findContours()轮廓与绘制drawContours（）...
  9. orm2 中文文档 3.2 模型验证器
  10. 用html代码写一个表白语言,HTML写代码表白 – 爱心
  11. SQL Server 中“dbo”到底是什么
  12. friends105. The One with the East German Laundry Detergent
  13. 性能测试监控TP50、TP99、TP999含义
  14. Polkadot（波卡）简介
  15. STM32CubeMX和STM32CubeIDE组合，定义STM32开发新方式
  16. python协程处理海量文件_Python使用asyncio和run-In-Executor线程池处理多个文件的同时下载,python,协程,加,runinexecutor...
  17. [转载]流利说Level5
  18. 程序员生存定律-选公司前要干的事：分类
  19. Mansory makeConstraints 、remakeConstraints 、updateConstraints 注意事项
  20. 【Android -- 动画】Lottie 动画的基本使用

热门文章

  1. 自定义悬浮球，提供一些快捷操作。比如一键静音，一键锁频，一键截屏，一键回桌面，手电筒等
  2. JMeter Dummy sampler结果乱码 及 正则表达式提取器乱码的解决
  3. IT圈持续部署并不是毫不费力 确是不平凡
  4. 台式机怎样连接连接蓝牙耳机？搜索不到蓝牙耳机？
  5. 修改 Git 已经提交记录的 用户名 和邮箱
  6. linux wifi设置端口号,Linux 下wifi 驱动开发（四）—— USB接口WiFi驱动浅析
  7. Photoshop 快捷键设置之进化
  8. 为知笔记docker镜像安装
  9. 董付国老师6本Python系列教材被北大、复旦等近百所高校选作教材
  10. 亲测解决知网下载的正版国家标准打开不了