美文网首页
仿京东分类选择动画

仿京东分类选择动画

作者: Mr鹏先生 | 来源:发表于2017-10-27 17:40 被阅读64次

这是仿照京东APP分类左侧的动画效果 、用tableview写的、代码不是很多 应该很好理解的☺
先上个效果图:


Untitleda.gif

上代码:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // 获取总个数
    indexTagMAll = [[self shopTitle] count];
    // 获取cell在屏幕上显示的长度
    screenHeight = self.view.frame.size.height-64;
    // 获取中间位置的index
    indexTagMid = screenHeight/CellHeight/2;
    
    // 获取屏幕显示的个数
    NSInteger indexNumber = screenHeight/CellHeight;
    
    if (indexNumber>=indexTagMAll) {
        NSLog(@"不需要移动");
    }else {
        if (indexPath.section>indexTagMid) { //  点击的物品超过一半 继续判断是否位移
            // 获取移动的位数
            NSInteger conset =  indexPath.section - indexTagMid -1;
            if (conset>=0) {
                // 获取总高度
                CGFloat accordingTotalHeight = indexTagMAll*CellHeight;
                // 减去位移的高度
                CGFloat displacementHeight  = accordingTotalHeight -  indexPath.section*CellHeight;
                // 还有一种情况>0即超出的部分小于显示的一半折全部位移上来
                if (displacementHeight > 0) { // screenHeight
                    if (displacementHeight-screenHeight/2>0)
                    {// 超出处理 上移对应位置
                        [self.offsetTable setContentOffset:CGPointMake(0, conset*CellHeight) animated:YES];
                    }
                    else
                    {// 超出但是小于底部位置以中心点为基准
                        [self.offsetTable setContentOffset:CGPointMake(0, ([[self shopTitle] count]-indexTagMid*2-1)*CellHeight) animated:YES];
                    }
                }
            }
        }else { // 返回时 小于中心点位置 还原
            [self.offsetTable setContentOffset:CGPointMake(0,0) animated:YES];
        }
        
    }
    
    
    
}

主要代码都在这里了
这里是我实现的一些想法:

屏幕快照 2017-10-27 下午5.27.31.png
这里以1到10的位置为一个屏幕的高度
首先获取到分类的总数,通过总数和cell的高度可以取道全部数据显示的总高度,显示的高度就是一个屏幕的高度。通过屏幕高度和cell的高度取到中心位置显示的第几个cell;每当选中cell时,都是以中心位置为点去位移。具体的算法都在代码里。也不多大家可以慢慢看🙃;不懂的可以加Q相互交流,今天就到这里了 附上demo----https://gitee.com/xpyt/JingDongFenLeiDongHua/tree/master

相关文章

网友评论

      本文标题:仿京东分类选择动画

      本文链接:https://www.haomeiwen.com/subject/csldpxtx.html