怎样做一个iOS App的启动分层引导动画?
2014-12-11 17:20
246 查看
一. 为什么要写这篇文章?
这是一个很古老的话题,从两年前新浪微博开始使用多层动画***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的滚动状态)等等。
2. 加入页面元素
还是不要全篇幅贴代码了,以第一页为例把。
前面掉渣天的蛇鸡屎(我)的demo图已经表明,第一页,我们要有3个UILabel,一个UIImageView。
那么好,这些元素我们就给他声明出来。
在第一页刚刚显示的时候,我们就希望第一页的元素能够有一个动起来的效果。那我们在上面刚刚加入第一页元素之后,可以紧接着做下面的事情:
然后,我们希望在手指滑动scrollview 的时候,第一页的四个元素可以有相应的分层错位动画,那么我们第一需要拿到当前scrollView的位移量,也就是前面提到的很重要的contentOffset。这个值,在:
具体来看,怎么做。
[code=js]- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat currentX = scrollView.contentOffset.x;
if (currentX
这是一个很古老的话题,从两年前新浪微博开始使用多层动画***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的滚动状态)等等。
//初始化 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。
那么好,这些元素我们就给他声明出来。
@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然后把第一页的元素,加进来~
//为了更方便的初始化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); }];可以看到,我们分别给第一页的四个元素不同的水平位移,然后希望它用0.7秒的时间,移动到之前init他们时候的位置。这样就完成了第一个4层的错位动画。
然后,我们希望在手指滑动scrollview 的时候,第一页的四个元素可以有相应的分层错位动画,那么我们第一需要拿到当前scrollView的位移量,也就是前面提到的很重要的contentOffset。这个值,在:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView中,可以实时的获取。
具体来看,怎么做。
[code=js]- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat currentX = scrollView.contentOffset.x;
if (currentX
相关文章推荐
- 怎样做一个iOS App的启动分层引导动画
- 怎样做一个iOS App的启动分层引导动画?
- 怎样做一个iOS App的启动分层引导动画?
- 怎样做一个iOS App的启动分层引导动画?
- iOS疯狂详解之启动分层引导动画
- 标签:ios开发 界面启动 APP下载安装第一次使用一般会显示一个首次启动引导界面然后进入主界面,非首次开启APP也通常会显示一个启动界面然后进入主界面。 1、本例首次启动显示First
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- ios如果写一个提示带动画的View,可以来引导用户行为
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- IOS app启动动画的实现
- 怎样判断ios app 第一次启动
- 怎样判断iOS App是通过哪种途径启动的?
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- 怎样判断ios app 第一次启动
- iOS App启动动画