在陌陌探探等交友软件中，有个很经典的左滑喜欢，右滑下一个的效果。还有个撤销上一次不喜欢的功能。VIP可以无限撤销。工作有这个需求，就搜了下，明白了思路，就自己动手敲一遍，理清思路，修改成适合自己使用的。记录一下过程，省的时间长了就忘了。
先上效果图：
滑动效果.gif
核心：拖动手势的处理，在拖动过程中改变各个view位置和大小。主要是计算center.y的改变。
代码实现过程中，各个图片的间距、缩放大小、图片大小需要经常使用，所以设置了宏，方便使用和修改。
并使用一个全局变量数组，存放4个图片对象，方便处理数据。
设置两个全局变量分别记录最上层图片和最下层图片。
@property (nonatomic, strong) NSMutableArray *cards;
@property (nonatomic, strong) UIView *topCard; //最上面
@property (nonatomic, strong) UIView *bottomCard; //最底部
#define ImageWidth 200
#define ImageHeight 300
#define ImageScale 0.1 //每张图片初始化缩小尺寸
#define ImageSpace 20 //每张图片底部距离
过程分析：
一、初始化。
可以看到默认显示3张图片。拖动第一张过程中，其他2张往上移动，移动过程中逐步变大。最后一张没变化。所以总共需要初始化4个图片。
由于默认显示3张，第3张和第4张的大小位置相同。
每张图片初始化后，就加载显示，并调用sendSubviewToBack方法，把新建的对象放到最下层，后面的图片根据for循环里初始化代码，位置越来越靠下，并且越来越小。初始化完成。
for (int i = 0; i < 4; i++) {
UIView *card = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ImageWidth, ImageHeight)];
card.tag = 100 + i;
int index = i;
if (index == 3) {
index = 2;
}
// y坐标 = 屏幕中心点+中心点下移的距离+每个图片距离第一张图片的间距
// 图片高度*缩放比例 = 图片减小的总大小。除以2是中心下移的距离，就可以和第一张图片底部对齐
card.center = CGPointMake(ScreenW/2, ScreenH/2 +(ImageHeight*ImageScale*index/2)+ ImageSpace*index);
card.transform = CGAffineTransformMakeScale(1-ImageScale*index, 1-ImageScale*index);
card.backgroundColor = self.dataArr[i];
[self.cards addObject:card];
[self.view addSubview:card];
[self.view sendSubviewToBack:card];
//添加拖动手势
UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panHandle:)];
[card addGestureRecognizer:pan];
card.userInteractionEnabled = NO;
if (i == 0) {
card.userInteractionEnabled = YES;
self.topCard = card;
}else if (i == 3){
self.bottomCard = card;
}
}
二、拖动过程中
先处理拖动的图片。由于第一张没有缩放，拖动过程中也不需要改变大小，所以只考虑位置，改变中心点即可。
根据translationInView:方法得到手指拖动移动的距离，改变center就行了。调用setTranslation:CGPointZero重置拖动距离，每次计算完毕改完center就从新开始。
其中，往左往后滑动，最多也就拖动半个屏幕的距离，所以根据屏幕的一半计算出拖动距离在半个屏幕中的比例XOffPercent。从0到1。是0就说明没移动，其他的图片不要改变，是1的说明拖动结束，当前图片移出屏幕，第2张大小和位置变成第一张的大小和位置，其他图片依次类推。
CGPoint transLcation = [pan translationInView:cardView];
cardView.center = CGPointMake(cardView.center.x + transLcation.x, cardView.center.y + transLcation.y);
CGFloat XOffPercent = (cardView.center.x-ScreenW/2.0)/(ScreenW/2.0);
CGFloat rotation = M_PI_2/4*XOffPercent;
cardView.transform = CGAffineTransformMakeRotation(rotation);
[pan setTranslation:CGPointZero inView:cardView];
根据滑动比例XOffPercent，处理其他图片的大小和位置。
拖动过程中调用。
一个for循环，除去第一张和最后一张，改变中间两张的大小。主要是center的y值比较麻烦。同时更改图片的选择角度，看起来美观一些。
这个高度计算是核心，这个搞明白了，其他的都不是问题了。
主要就是原始位置减去根据滑动比例引起的位置改变。
其中XOffPercent*ImageSpace代表每张图片只需要移动一个间隔的距离。
(ImageHeight*ImageScale*index/2)*XOffPercent/index，中心点需要移动的距离，最后除以index，代表只需要移动到相邻中心点的距离。
刚做的时候，没除index，效果不对，想了好大一会才明白问题出哪了。
- (void)animationBlowViewWithXOffPercent:(CGFloat)XOffPercent {
for (UIView *card in self.cards) {
if (card != self.topCard && card.tag != 103) {
NSInteger index = card.tag-100;
card.center = CGPointMake(ScreenW/2,ScreenH/2
+ (ImageHeight*ImageScale*index/2)
+ ImageSpace*index //上面3行是原始位置，下面2行是改变的大小
- XOffPercent*ImageSpace
- (ImageHeight*ImageScale*index/2)*XOffPercent/index);
CGFloat scale = 1-ImageScale*index + XOffPercent*ImageScale;
card.transform = CGAffineTransformMakeScale(scale, scale);
}
}
}
三、拖动结束
根据距离屏幕的距离自行判断是否需要移除图片。
如果不需要移除，就用UIView动画把第一张图片恢复成原始状态，并调用animationBlowViewWithXOffPercent方法处理其他的图片，滑动比例是0。表示其他图片也恢复成原始状态。
如果需要移除，滑动比例是1。最后更改第一张图片和最后一张图片的值，重置每张图片的tag值等，没什么好说的
-(void)cardRemove{
// 滑动结束第一张和放到数组最后
[self.cards removeObject:self.topCard];
[self.cards addObject:self.topCard];
// 重新设置tag
for (int i = 0 ; i < 4; i++) {
UIView *card = self.cards[i];
card.tag = 100+i;
}
// 重置第一张和最后一张（第4）
self.topCard.userInteractionEnabled = NO;
self.topCard.center = CGPointMake(ScreenW/2, ScreenH/2 + (ImageHeight*ImageScale*2/2) + ImageSpace*2);
self.topCard.transform = CGAffineTransformMakeScale(1-ImageScale*2, 1-ImageScale*2);
[self.view sendSubviewToBack:self.topCard];
self.bottomCard = self.topCard;
UIView *currentCard = self.cards.firstObject;
currentCard.userInteractionEnabled = YES;
self.topCard = currentCard;
}
四、点击按钮滑动
和拖动类似，就是UIView动画，改变第一张的位置，同时更改其他图片的大小和位置，原理一样。最后重置tag，更改第一张和最后一张全局变量的值.
计算y的值还是关键。
[UIView animateWithDuration:0.5 animations:^{
self.topCard.center = CGPointMake(-ImageWidth, ScreenH/2+50);
self.topCard.transform = CGAffineTransformMakeRotation(-M_PI_4/2);
for (UIView *card in self.cards) {
if (card.tag != 100 && card.tag != 103) {
NSInteger index = card.tag - 100;
card.center = CGPointMake(ScreenW/2, ScreenH/2
+ ImageHeight*index*ImageScale/2
+ ImageSpace*index //原始位置
- ImageSpace
- (ImageHeight*ImageScale*index/2)/index);
CGFloat scale = 1-index*ImageScale + ImageScale;
card.transform = CGAffineTransformMakeScale(scale, scale);
}
}
}completion:^(BOOL finished) {
sender.userInteractionEnabled = YES;
[self cardRemove];
}];
移除第一张，变成最后一张。更改数组里对象的位置和tag。
-(void)cardRemove{
// 滑动结束第一张和放到数组最后
[self.cards removeObject:self.topCard];
[self.cards addObject:self.topCard];
// 重新设置tag
for (int i = 0 ; i < 4; i++) {
UIView *card = self.cards[i];
card.tag = 100+i;
}
// 重置第一张和最后一张（第4）
self.topCard.userInteractionEnabled = NO;
self.topCard.center = CGPointMake(ScreenW/2, ScreenH/2 + (ImageHeight*ImageScale*2/2) + ImageSpace*2);
self.topCard.transform = CGAffineTransformMakeScale(1-ImageScale*2, 1-ImageScale*2);
[self.view sendSubviewToBack:self.topCard];
self.bottomCard = self.topCard;
UIView *currentCard = self.cards.firstObject;
currentCard.userInteractionEnabled = YES;
self.topCard = currentCard;
}
五、撤销返回
就是把最后一张变成第一张，第一张变成第二张。其他的图片中心往上移动，同时变大。
最后重置tag，更改第一张和最后一张全局变量的值。
过程参考第四部，实现过程类似，就不贴了。
网友评论