前言


iOS9系统下 为了我司APP的兼容性问题 特意把手上的iOS Mac XCode都升级到了最新的beta版 然后发现iOS9的多任务管理器风格大变 变成了下面这种样子

我忽然想起来之前的文章提到我最爱的UI控件iCarousel要实现类似这种效果其实是很简单的 一时兴起就花时间试验了一下 效果还不错 所以接下来我就介绍一下iCarousel的高级用法: 如何使用iCarousel的自定义方式来实现iOS9的多任务管理器效果

模型


首先来看一下iOS9的多任务管理器究竟是什么样子

然后我们简单的来建个模 这个步骤很重要 将会影响我们之后的计算 首先我们把东西摆正

然后按比例用线分割一下

这里可以看到 如果我们以正中间的卡片(设定序号为0)为参照物的话 最右边卡片(序号为1)的位移就是中心卡片宽度的4/5 最左边的卡片(序号为-2)的位移就是中心卡片的宽度的2/5 注意:这两个值的确定对我们非常重要

大小*的缩放 就按照线性放大**就行了 由于计算很简单 这里就不多赘述了

细心的人可能会注意到 其实iOS9中的中心卡片 并不是居中的 而是靠右的 那么我们再把整体布局调整一下

这样就差不多是iOS9的样子了

原理


接着我们来了解一下iCarousel的基本原理

iCarousel支持如下几种内置显示类型(没用过的同学请务必使用pod try iCarousel来运行一下demo)

  • iCarouselTypeLinear
  • iCarouselTypeRotary
  • iCarouselTypeInvertedRotary
  • iCarouselTypeCylinder
  • iCarouselTypeInvertedCylinder
  • iCarouselTypeWheel
  • iCarouselTypeInvertedWheel
  • iCarouselTypeCoverFlow
  • iCarouselTypeCoverFlow2
  • iCarouselTypeTimeMachine
  • iCarouselTypeInvertedTimeMachine

具体效果图可以在官方Github主页上看到 不过这几种类型虽然好 但是也无法满足我们现在的需求 没关系 iCarousel还支持自定义类型

  • iCarouselTypeCustom

这就是我们今天的主角

还是代码说话 我们先配置一个简单的iCarousel示例 并使用iCarouselTypeCustom作为其类型

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@interface ViewController ()
<
iCarouselDelegate,
iCarouselDataSource
> @property (nonatomic, strong) iCarousel *carousel;
@property (nonatomic, assign) CGSize cardSize; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; CGFloat cardWidth = [UIScreen mainScreen].bounds.size.width*5.0f/7.0f;
self.cardSize = CGSizeMake(cardWidth, cardWidth*16.0f/9.0f);
self.view.backgroundColor = [UIColor blackColor]; self.carousel = [[iCarousel alloc] initWithFrame:[UIScreen mainScreen].bounds];
[self.view addSubview:self.carousel];
self.carousel.delegate = self;
self.carousel.dataSource = self;
self.carousel.type = iCarouselTypeCustom;
self.carousel.bounceDistance = 0.2f; } - (NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
return 15;
} - (CGFloat)carouselItemWidth:(iCarousel *)carousel
{
return self.cardSize.width;
} - (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
UIView *cardView = view; if ( !cardView )
{
cardView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.cardSize.width, self.cardSize.height)]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:cardView.bounds];
[cardView addSubview:imageView];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.backgroundColor = [UIColor whiteColor]; cardView.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:imageView.frame cornerRadius:5.0f].CGPath;
cardView.layer.shadowRadius = 3.0f;
cardView.layer.shadowColor = [UIColor blackColor].CGColor;
cardView.layer.shadowOpacity = 0.5f;
cardView.layer.shadowOffset = CGSizeMake(0, 0); CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = imageView.bounds;
layer.path = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:5.0f].CGPath;
imageView.layer.mask = layer;
} return cardView;
}

当你运行这段代码的时候哦 你会发现显示出来是下面这个样子的 并且划也划不动(掀桌:这是什么鬼~(/‵Д′)/~ ╧╧)

这是因为我们有个最重要的delegate方法没有实现

1
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset

这个函数也是整个iCarouselTypeCustom的灵魂所在

接下来我们要简单的说一下iCarousel的原理

  • iCarousel并不是一个UIScrollView 也并没有包含任何UIScrollView作为subView
  • iCarousel通过UIPanGestureRecognizer来计算和维护scrollOffset这个变量
  • iCarousel通过scrollOffset来驱动整个动画过程
  • iCarousel本身并不会改变itemView的位置 而是靠修改itemView的layer.transform来实现位移和形变

可能文字说得不太清楚 我们还是通过代码来看一下

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
26
27
28
- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
UIView *cardView = view; if ( !cardView )
{
cardView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.cardSize.width, self.cardSize.height)]; ...
... //添加一个lbl
UILabel *lbl = [[UILabel alloc] initWithFrame:cardView.bounds];
lbl.text = [@(index) stringValue];
[cardView addSubview:lbl];
lbl.font = [UIFont boldSystemFontOfSize:200];
lbl.textAlignment = NSTextAlignmentCenter;
} return cardView;
} - (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
NSLog(@"%f",offset); return transform;
}

然后滑动的时候打出的日志是类似这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2015-07-28 16:53:22.330 DemoTaskTray[1834:485052] -2.999739
2015-07-28 16:53:22.331 DemoTaskTray[1834:485052] 2.000261
2015-07-28 16:53:22.331 DemoTaskTray[1834:485052] -1.999739
2015-07-28 16:53:22.331 DemoTaskTray[1834:485052] 3.000261
2015-07-28 16:53:22.331 DemoTaskTray[1834:485052] -0.999739
2015-07-28 16:53:22.332 DemoTaskTray[1834:485052] 0.000261
2015-07-28 16:53:22.332 DemoTaskTray[1834:485052] 1.000261 2015-07-28 16:53:22.346 DemoTaskTray[1834:485052] -3.000000
2015-07-28 16:53:22.347 DemoTaskTray[1834:485052] 2.000000
2015-07-28 16:53:22.347 DemoTaskTray[1834:485052] -2.000000
2015-07-28 16:53:22.348 DemoTaskTray[1834:485052] 3.000000
2015-07-28 16:53:22.348 DemoTaskTray[1834:485052] -1.000000
2015-07-28 16:53:22.348 DemoTaskTray[1834:485052] 0.000000
2015-07-28 16:53:22.348 DemoTaskTray[1834:485052] 1.000000 2015-07-28 16:53:22.363 DemoTaskTray[1834:485052] -3.000000
2015-07-28 16:53:22.363 DemoTaskTray[1834:485052] 2.000000
2015-07-28 16:53:22.363 DemoTaskTray[1834:485052] -2.000000
2015-07-28 16:53:22.363 DemoTaskTray[1834:485052] 3.000000
2015-07-28 16:53:22.364 DemoTaskTray[1834:485052] -1.000000
2015-07-28 16:53:22.364 DemoTaskTray[1834:485052] 0.0000002015-07-28 16:53:22.364 DemoTaskTray[1834:485052] 1.000000

可以看到 所有的itemView都是居中并且重叠在一起的 我们滑动的时候并不会改变itemView的位置 但是这个offset是会改变的 而且可以看到 所有的offset的相邻差值都为1.0

这就是iCarousel的一个重要的设计理念 iCarousel虽然跟UIScrollView一样都各自会维护自己的scrollOffset 但是UIScrollView在滑动的时候改变的是自己的ViewPort 就是说 UIScrollView上的itemView是真正被放置到了他被设置的位置上 只是UIScrollView通过移动显示的窗口 造成了滑动的感觉(如果不理解 请看这篇文章)

但是iCarousel并不是这样 iCarousel会把所有的itemView都居中重叠放置在一起 当scrollOffset变化时 iCarousel会计算每个itemView的offset 并通过- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform这个函数来对每个itemView进行形变 通过形变来造成滑动的效果

这个非常大胆和另类的想法着实很奇妙! 可能我解释得不够好(尽力了~~) 还是通过代码来解释比较好

我们修改一下函数的实现

1
2
3
4
5
6
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
NSLog(@"%f",offset); return CATransform3DTranslate(transform, offset * self.cardSize.width, 0, 0);
}

效果如下

我们可以看到 已经可以滑动了 而且这个效果 就是类似iCarouselTypeLinear的效果
没错 其实iCarousel所有的内置类型也都是通过这种方式来实现的 只是分别根据offset进行了不同的形变 就造成了各种不同的效果
要说明的是 函数仅提供offset作为参数 并没有提供index来指明对应的是哪一个itemView 这样的好处是可以让人只关注于具体的形变计算 而无需计算与currentItemView之间的距离之类的

注意的是offset是元单位(就是说 offset是不包含宽度的 仅仅是用来说明itemView的偏移系数) 下图简单说明了一下

当没有滑动的时候 offset是这样的

当滑动的时候 offset是这样的

怎么样 知道了原理之后 是不是有种跃跃欲试的感觉? 接下来我们就回到主题上 看看如何一步步实现我们想要的效果

计算


通过刚才原理的介绍 可以知道 接下来的重点就是关于offset的计算

我们首先来确定一下函数的曲线图 通过观察iOS9的实例效果我们可以知道 itemView从左向右滑的时候是越来越快的
所以这个曲线大概是这个样子的

考验你高中数学知识的时候到了 怎么找到这种函数?
有种叫直角双曲线的函数 大概公式是这个样子

其曲线图是这样的

可以看到 位于第二象限的曲线就是我们要的样子 但是我们还要调整一下才能得到最终的结果

由于offset为0的时候 本身是不形变的 所以可以知道曲线是过原点(0,0)的 那么我们可以得到函数的一般式

而在文章开头我们得到了这样两组数据

  • 最右边卡片(序号为1)的位移就是中心卡片宽度的4/5
  • 最左边的卡片(序号为-2)的位移就是中心卡片的宽度的2/5

那么代入上面的一般式中 我们可以得到两个公式

计算可以得到

a=5/4
b=5/8

然后我们就可以得到我们最终想要的公式

看看曲线图

然后我们修改一下程序代码(这段代码其实就是本文的关键所在)

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
CGFloat scale = [self scaleByOffset:offset];
CGFloat translation = [self translationByOffset:offset]; return CATransform3DScale(CATransform3DTranslate(transform, translation * self.cardSize.width, 0, 0), scale, scale, 1.0f);
} - (void)carouselDidScroll:(iCarousel *)carousel
{
for ( UIView *view in carousel.visibleItemViews)
{
CGFloat offset = [carousel offsetForItemAtIndex:[carousel indexOfItemView:view]]; if ( offset < -3.0 )
{
view.alpha = 0.0f;
}
else if ( offset < -2.0f)
{
view.alpha = offset + 3.0f;
}
else
{
view.alpha = 1.0f;
}
}
} //形变是线性的就ok了
- (CGFloat)scaleByOffset:(CGFloat)offset
{
return offset*0.04f + 1.0f;
} //位移通过得到的公式来计算
- (CGFloat)translationByOffset:(CGFloat)offset
{
CGFloat z = 5.0f/4.0f;
CGFloat n = 5.0f/8.0f; //z/n是临界值 >=这个值时 我们就把itemView放到比较远的地方不让他显示在屏幕上就可以了
if ( offset >= z/n )
{
return 2.0f;
} return 1/(z-n*offset)-1/z;
}

再看看效果

看上去已经是我们想要的效果了

不过 滑动一下就会发现问题

原来虽然itemView的大小和位移都按照我们的预期变化了 但是层级出现了问题 那么iCarousel是如何调整itemView的层级的呢? 查看源码我们可以知道

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
26
27
28
29
30
31
32
33
34
35
36
37
38
NSComparisonResult compareViewDepth(UIView *view1, UIView *view2, iCarousel *self)
{
//compare depths
CATransform3D t1 = view1.superview.layer.transform;
CATransform3D t2 = view2.superview.layer.transform;
CGFloat z1 = t1.m13 + t1.m23 + t1.m33 + t1.m43;
CGFloat z2 = t2.m13 + t2.m23 + t2.m33 + t2.m43;
CGFloat difference = z1 - z2; //if depths are equal, compare distance from current view
if (difference == 0.0)
{
CATransform3D t3 = [self currentItemView].superview.layer.transform;
if (self.vertical)
{
CGFloat y1 = t1.m12 + t1.m22 + t1.m32 + t1.m42;
CGFloat y2 = t2.m12 + t2.m22 + t2.m32 + t2.m42;
CGFloat y3 = t3.m12 + t3.m22 + t3.m32 + t3.m42;
difference = fabs(y2 - y3) - fabs(y1 - y3);
}
else
{
CGFloat x1 = t1.m11 + t1.m21 + t1.m31 + t1.m41;
CGFloat x2 = t2.m11 + t2.m21 + t2.m31 + t2.m41;
CGFloat x3 = t3.m11 + t3.m21 + t3.m31 + t3.m41;
difference = fabs(x2 - x3) - fabs(x1 - x3);
}
}
return (difference < 0.0)? NSOrderedAscending: NSOrderedDescending;
} - (void)depthSortViews
{
for (UIView *view in [[_itemViews allValues] sortedArrayUsingFunction:(NSInteger (*)(id, id, void *))compareViewDepth context:(__bridge void *)self])
{
[_contentView bringSubviewToFront:view.superview];
}
}

主要就是这个compareViewDepth的比较函数起作用 而这个函数中比较的就是CATransform3D的各个属性值

我们来看一下CATransform3D的各个属性各代表什么

1
2
3
4
5
6
7
8
9
10
struct CATransform3D
{
CGFloat m11(x缩放), m12(y切变), m13(旋转), m14(); CGFloat m21(x切变), m22(y缩放), m23(), m24(); CGFloat m31(旋转), m32( ), m33(), m34(透视); CGFloat m41(x平移), m42(y平移), m43(z平移), m44();
};

而所有CATransform3D开头的函数(比如CATransform3DScale CATransform3DTranslate) 改变的也就是这些值而已

回到整体 我们发现这个函数先比较的是t1.m13 + t1.m23 + t1.m33 + t1.m43; 而m13代表的是旋转 m23和m33暂时并没有含义 而m43代表的是z平移 那么我们只要改变m43就可以了 而改变m43最简单的办法就是

1
CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx,CGFloat ty, CGFloat tz)

最后一个参数就是用来改变m43的

那么我们把之前iCarousel的delegate方法稍微改动一下 将当前的offset设置给最后一个参数即可(因为offset就是按顺序传进来的)

1
return CATransform3DScale(CATransform3DTranslate(transform, translation * self.cardSize.width, 0, offset), scale, scale, 1.0f);

再看看效果

Bang!
我们已经得到了一个简单的copycat

小结


文中的demo可以在这里找到

可以看到 使用iCarousel 我们仅用不到100行就实现了一个非常不错的效果(关键代码不到50行) 而无需做很多额外的工作(当然大家就不要揪细节了 比如以渐隐代替模糊 最后一张卡片居中等问题 毕竟这不是个轮子 只是教大家一种方法)

如果大家真正读懂了这篇文章(可能我写得不是很清楚 建议看demo 同时读iCarousel的源码来理解) 那么只要遇到类似卡片滑动的组件 都可以轻松应对了

说到这里 我个人是非常不喜欢重复造轮子的 能用最少的代码达到所需的要求是我一直以来的准则 而且很多经典的轮子库(比如iCarousel)也值得你去深入探索和学习 了解作者的想法和思路(站在巨人的肩膀)是一种非常不错的学习方法和开阔视野的途径

另外 文中所用到的数学公式曲线图生成网站是Desmos Graphing Calculator(从@KITTEN-YANG那瞄到的) 数学公式生成网站是Sciweaver(直接把前者的公式复制到后者的输入框里就可以了 因为前者复制出来就是latex格式的公式了) 有需要的同学可以研究一下如何使用 (打算研究一下Matlab的用法 可能更方便)

如何轻松实现iOS9多任务管理器效果(iCarousel高级教程)的更多相关文章

  1. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. ios9怎么设置6位密码 ios9设置6位密码图文教程

    在原来的 iOS 系统中,只有四位数字密码与复杂密码之分,而在 iOS9 系统中却多出了一个六位数字密码,那ios9怎么设置6位密码,今天小编就为大家带来ios9设置6位密码图文教程   在原来的 i ...

  3. jQuery插件EasyDrag轻松实现JS拖动的效果

    jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html 实现效果图:分布实现一.页面Html标签元素定义 <!doc ...

  4. 拖拽碰撞效果,高级浏览器下全部搞定(ie6-8还没有搞定)

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  6. Ipad亚麻布纹背景-最终效果_学习教程

  7. iOS9新特性——堆叠视图UIStackView

    一.引言 随着autolayout的推广开来,更多的app开始使用自动布局的方式来构建自己的UI系统,autolayout配合storyBoard和一些第三方的框架,对于创建约束来说,已经十分方便,但 ...

  8. NGUI实现技能CD效果

    在NGUI中使用Sprite的遮罩效果可以很轻松的实现技能CD效果. 具体实现步骤: ①新建一个技能图标的Sprite 如图中的Skill001,再在该技能Sprite上添加一个Sprite做遮罩, ...

  9. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

随机推荐

  1. Linux下打开串口设置

    给出打开串口函数 int open_tty(char tty[]) { int fd; char tty_path[32]={0}; sprintf(tty_path,"/dev/%s&qu ...

  2. [Math] Hidden Markov Model

    链接:https://www.zhihu.com/question/20962240/answer/33438846   霍金曾经说过,你多写一个公式,就会少一半的读者. 还是用最经典的例子,掷骰子. ...

  3. 解决msgfmt无法使用的问题

    参考: http://blog.sina.com.cn/s/blog_4fb490ff0100csne.html http://linux.die.net/man/1/msgfmt http://pa ...

  4. HTML5开发手机项目—个人总结

    让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>   1)html上加 ...

  5. Feathers JS – 基于 Express 构建数据驱动的服务

    Feathers 是一个轻量的 Web 应用程序框架,基于 NodeJS 最流行​​的 Web 框架——Express.这使得它很容易使用 socket.io 来创建 RESTful Web 服务和实 ...

  6. 使用WinDbg调试SQL Server查询

    上一篇文章我给你介绍了WinDbg的入门,还有你如何能附加到SQL Server.今天的文章,我们继续往前一步,我会向你展示使用WinDbg调试SQL Server查询需要的步骤.听起来很有意思?我们 ...

  7. 连续值的CART(分类回归树)原理和实现

    上一篇我们学习和实现了CART(分类回归树),不过主要是针对离散值的分类实现,下面我们来看下连续值的cart分类树如何实现 思考连续值和离散值的不同之处: 二分子树的时候不同:离散值需要求出最优的两个 ...

  8. Linq专题之集合初始化器

    集合初始化器用来初始化一个集合,和对象初始化器有点类似,都是用一对{}来初始化. using System; using System.Collections.Generic; using Syste ...

  9. Java数字图像处理基础 - 必读

    写了很多篇关于图像处理的文章,没有一篇介绍Java 2D的图像处理API,文章讨论和提及的 API都是基于JDK6的,首先来看Java中如何组织一个图像对象BufferedImage的,如图: 一个B ...

  10. HTML5标准简介

    最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...