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
欢迎批评指正以及各种优化思路。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 《空明》 今天开启了简书之旅,希望能结交朋友,探讨艺术,感悟永恒之美,领悟人生真谛! As 梵高——我梦想着绘画,...
    Lemonic阅读 107评论 0 0
  • 周一早晨七点,学生返校进入教室。冬至刚过,我们这里冷了许多,孩子们穿着厚厚的冬装,动作明显笨了许多。小脸被早晨的冷...
    清风8833阅读 331评论 0 0
  • 《桃花庵歌》年代:明 作者: 唐寅桃花坞里桃花庵,桃花庵下桃花仙;桃花仙人种桃树,又摘桃花卖酒钱。酒醒只在花前坐,...
    大鸟8wo阅读 554评论 4 6