IOS 高德首页及淘宝物流界面推拉效果探索

仿高德和淘宝物流的推拉效果进行了一些尝试调整,无图言鸟,先吃我一发效果图。

高德首页悬停推拉效果:


gaodePully.gif

淘宝物流蒙层推拉效果:


taoBaoPully.gif

高德首页悬停推拉效果实现原理:
记录最后一次滑动位置,定义自己所需的几种伸缩状态,根据滑动位置判断当前伸缩状态情况,开放出去代理方法进行悬停位置控制。(ps:起初我们判断高德地图的推拉操作做了controller切换,以及详情页推拉上来之后回首页做了pop操作,效果实现使用了多个controller,新版高德之后发现与我们的判断不符,淘宝物流蒙层推拉效果摒弃了这个思路)

#pragma mark - public method
/**
 根据伸缩状态处理悬停动作

 @param status 伸缩状态
 */
- (void)updateStatus:(JYPulleyStatus)status animated:(BOOL)animated {

    if (!(self.supportedStatus & status)) {
        return;
    }

    CGFloat stopToMoveTo;
    CGFloat minimumHeight = [self drawerClosedHeight];

    if (status == JYPulleyStatusClosed) {

        stopToMoveTo = minimumHeight;

    } else if (status == JYPulleyStatusPartiallyExpand) {

        stopToMoveTo = [self drawerPartiallyExpandHeight];

    } else if (status == JYPulleyStatusExpand) {

        if ([self drawerExpandHeight] > 0) {
            stopToMoveTo = [self drawerExpandHeight];
        } else {
            stopToMoveTo = self.scrollView.frame.size.height;
        }

    } else {

        stopToMoveTo = 0.0f;
    }

    self.currentStatus = status;

    if (animated) {

        [UIView animateWithDuration:0.3
                              delay:0.0
             usingSpringWithDamping:0.75
              initialSpringVelocity:0.0
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{

                            [self.scrollView
                                setContentOffset:CGPointMake(0, stopToMoveTo - minimumHeight)
                                        animated:NO];

                            if (self.dimmingView) {
                                self.dimmingView.frame =
                                    [self dimmingViewFrameForDrawerPosition:stopToMoveTo];
                            }

                         } completion:nil];

    } else {

        [self.scrollView setContentOffset:CGPointMake(0, stopToMoveTo - minimumHeight)
                                 animated:NO];

        if (self.dimmingView) {
            self.dimmingView.frame = [self dimmingViewFrameForDrawerPosition:stopToMoveTo];
        }
    }

}

淘宝物流蒙层推拉效果实现原理:
处理手势冲突。重写推拉view的hitTest方法

//设置内边距外区域的点击不响应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (point.y < 0)
    {
        return nil;
    }
    return [super hitTest:point withEvent:event];;
}

根据滑动位置设置背景透明度

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSLog(@"%f",scrollView.contentOffset.y);
    //    通过滚动设置背景alap值
    CGFloat bgAlap = 0;
    //    假定设置了初始偏移卫300  往上滚动300背景设置为1 计算公式为 (这里没有做屏幕适配根据需求可自行设置)
    bgAlap = (scrollView.contentOffset.y + 400) / 300;
    if (bgAlap > 1) {
        bgAlap = 1;
    } else if (bgAlap < 0 ) {
        bgAlap = 0;
    }
    self.bgView.alpha = bgAlap;
    NSLog(@"%f",bgAlap);
}

demo地址:https://github.com/earnestLin/LINPullTableView
欢迎批评指正以及各种优化思路。

你可能感兴趣的:(IOS 高德首页及淘宝物流界面推拉效果探索)