如何轻松实现iOS9多任务管理器效果(iCarousel高级教程)

本文转载至 http://adad184.com/2015/08/01/advanced-icarousel-tutorial-copycat-of-ios9-task-tray/

前言

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作为其类型

@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来实现位移和形变

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

- (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;
}

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

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.000000
2015-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进行形变通过形变来造成滑动的效果

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

我们修改一下函数的实现

- (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

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

看看曲线图

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

- (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的层级的呢? 查看源码我们可以知道

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的各个属性各代表什么

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的用法可能更方便)

posted @ 2015-09-24 10:39 天牛阅读(417) 评论(0) 编辑收藏举报

刷新页面返回顶部

天牛

如何轻松实现iOS9多任务管理器效果(iCarousel高级教程)

本文转载至 http://adad184.com/2015/08/01/advanced-icarousel-tutorial-copycat-of-ios9-task-tray/

前言

模型

原理

计算

小结

公告