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

仿京东分类选择动画

作者: 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