之前很喜欢收藏dribbble里面的一些动效gif，里面不仅是动效还是配色等等都非常的美，作为一个视觉动物，真的想把他们一个一个都实现出来，作为自己的一个作品，那真的是一件赏心悦目的事情，看着G20也快结束了，赶紧趁还闲着，先实现一个，我先挑选了一个比较简单的动效-----抽屉式效果列表
我们先来看下效果:
原来的动效地址找不到了...有知道的请留言给我...
代码地址：https://github.com/Yuzeyang/GCDrawerTableView
老样子，我们来分析下步骤
0x00 cell的处理
我们将cell和详情界面分开来处理,我们可以看到，当我们选中其中一个cell的时候，该cell会移动到列表上方的某一个位置，其他cell则不显示，点击x的时候，cell返回为原位，其他cell又重新显示
选中处理：首先是先将其他cell隐藏，我们取出tableview的可见cell，然后将除了选中的cell之外的透明度都设置为0
GCTableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[self.tableView bringSubviewToFront:cell];
for (UIView *subcell in tableView.visibleCells) {
if (subcell != cell) {
subcell.alpha = 0;
}
}
然后改变选中cell的原点值，并且给cell增加阴影，这里我偷懒没有做按钮的动画，只是用文字表示了按钮的状态
[UIView animateWithDuration:0.3 animations:^{
CGRect rect = self.frame;
self.originCellFrame = rect;
CGPoint origin = CGPointMake(0, contentOffsetY + 30);
rect.origin = origin;
self.frame = rect;
// 详情页处理
[self addShadowWithView:self];
[self addShadowWithView:self.detailView];
[self.detailButton setTitle:@"×" forState:UIControlStateNormal];
}];
由于cell的动画处理是放在自定义cell里面做的，所以在点击关闭的时候，需要在动画结束之后回调给视图控制器，所以这里就用了block来回调关闭的状态
- (void)deselectCell {
[UIView animateWithDuration:0.3 animations:^{
self.frame = self.originCellFrame;
self.layer.shadowColor = [UIColor clearColor].CGColor;
self.layer.shadowRadius = 0;
self.layer.shadowOpacity = 0.0;
// 详情页处理
[self.detailButton setTitle:@"..." forState:UIControlStateNormal];
} completion:^(BOOL finished) {
[self.helperHideView removeFromSuperview];
[self.detailView removeFromSuperview];
if (_deselectBlock) {
_deselectBlock();
}
}];
}
然后在试图控制器里面，将其他的cell透明度改成1
[cell addDeselectBlock:^() {
for (UIView *subcell in tableView.visibleCells) {
if (subcell != cell) {
subcell.alpha = 1;
}
}
tableView.allowsSelection = YES;
tableView.scrollEnabled = YES;
}];
0x01 详情页
可以看到详情页是类似于从上掉落的感觉，可能会联想到电商的那些筛选栏，但是筛选栏点击的时候，是上部分开始出现一直到下面，展示的顺序是反过来的，后面想了很久，只能想到利用视觉错误的效果，将详情页添加到cell的下一层，然后cell动画时候，详情页也做相应的动画，但是由于详情页的size比cell肯定是要大的，所以如果加到cell下一层时，是遮挡不住的，所以就需要一个遮挡的view来遮住详情页
首先我们需要将cell移到最前
[self.tableView bringSubviewToFront:cell];
然后在cell的下一层加上遮挡视图和详情页，并根据cell的origin做frame的变化
UIView *superview = self.superview;
CGFloat height = CGRectGetMinY(self.frame) - contentOffsetY + 30;
[self.helperHideView setFrame:CGRectMake(0, contentOffsetY, CGRectGetWidth(self.frame), height)];
[superview insertSubview:self.helperHideView belowSubview:self];
[self.detailView setFrame:CGRectMake(0, CGRectGetMaxY(self.frame) - (GCDeviceHeight - 100 - 30*2),
CGRectGetWidth(self.frame), GCDeviceHeight - 100 - 30*2)];
[superview insertSubview:self.detailView belowSubview:self.helperHideView];
[UIView animateWithDuration:0.3 animations:^{
// cell处理
CGRect rect2 = self.helperHideView.frame;
self.originHelperViewFrame = rect2;
CGPoint origin2 = CGPointMake(0, contentOffsetY + 30 - height);
rect2.origin = origin2;
self.helperHideView.frame = rect2;
CGRect rect1 = self.detailView.frame;
self.originDetailViewFrame = rect1;
CGPoint origin1 = CGPointMake(0, 100 + 30 + contentOffsetY);
rect1.origin = origin1;
self.detailView.frame = rect1;
[self addShadowWithView:self];
[self addShadowWithView:self.detailView];
[self.detailButton setTitle:@"×" forState:UIControlStateNormal];
}];
然后在关闭的时候，移除掉
- (void)deselectCell {
[UIView animateWithDuration:0.3 animations:^{
// cell处理
self.detailView.layer.shadowColor = [UIColor clearColor].CGColor;
self.detailView.layer.shadowRadius = 0;
self.detailView.layer.shadowOpacity = 0.0;
self.detailView.frame = self.originDetailViewFrame;
self.helperHideView.frame = self.originHelperViewFrame;
[self.detailButton setTitle:@"..." forState:UIControlStateNormal];
} completion:^(BOOL finished) {
[self.helperHideView removeFromSuperview];
[self.detailView removeFromSuperview];
if (_deselectBlock) {
_deselectBlock();
}
}];
}
这样就实现了抽屉式的效果，但是总感觉还有更好的办法实现，如果有思路的，欢迎交流~
网友评论