iOS实现淘宝上拉进入详情页交互效果

2020-01-18 17:52:40王冬梅

然后实现滚动视图UIScrollView的代理方法,在里面完成滚动到达临界值后,触发翻页动画的处理。包括了上拉翻到第二页和下拉翻回第一页两部分,即要在该方法里通过判断scrollView的类型做相应的处理。


#pragma mark ---- scrollView delegate

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
  CGFloat offsetY = scrollView.contentOffset.y;

  if([scrollView isKindOfClass:[UITableView class]]) // tableView界面上的滚动
  {
    // 能触发翻页的理想值:tableView整体的高度减去屏幕本省的高度
    CGFloat valueNum = _tableView.contentSize.height -PDHeight_mainScreen;
    if ((offsetY - valueNum) > _maxContentOffSet_Y)
    {
      [self goToDetailAnimation]; // 进入图文详情的动画
    }
  }

  else // webView页面上的滚动
  {
    NSLog(@"-----webView-------");
    if(offsetY<0 && -offsetY>_maxContentOffSet_Y)
    {
      [self backToFirstPageAnimation]; // 返回基本详情界面的动画
    }
  }
}

再看看两个翻页的动画,其实很简单,就是移动它们的位置。


// 进入详情的动画
- (void)goToDetailAnimation
{
  [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
    _webView.frame = CGRectMake(0, 0, PDWidth_mainScreen, PDHeight_mainScreen);
    _tableView.frame = CGRectMake(0, -self.contentView.bounds.size.height, PDWidth_mainScreen, self.contentView.bounds.size.height);
  } completion:^(BOOL finished) {

  }];
}


// 返回第一个界面的动画
- (void)backToFirstPageAnimation
{
  [UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionLayoutSubviews animations:^{
    _tableView.frame = CGRectMake(0, 0, PDWidth_mainScreen, self.contentView.bounds.size.height);
    _webView.frame = CGRectMake(0, _tableView.contentSize.height, PDWidth_mainScreen, PDHeight_mainScreen);

  } completion:^(BOOL finished) {

  }];
}

然后还有个在第二页下拉时屏幕顶部的文本提示的动画呢。这个我我们通过KVO来监听webView的scrollView的偏移量,只要其偏移量发生变化,便会实时执行KVO的代理方法,然后我们在方法内根据其偏移量的变动完成动画即可(随着偏移量变大字体变得非透明,达到某个临界点后,字体变为红色,文本内容也变为“释放,返回详情”)。

开始监听webView滚动的偏移量


  // 开始监听_webView.scrollView的偏移量
  [_webView.scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew|NSKeyValueObservingOptionOld context:nil];

在KVO的代理方法里,根据偏移量完成提示文本的动画


- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
  if(object == _webView.scrollView && [keyPath isEqualToString:@"contentOffset"])
  {
    NSLog(@"----old:%@----new:%@",change[@"old"],change[@"new"]);
    [self headLabAnimation:[change[@"new"] CGPointValue].y];
  }else
  {
    [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
  }

}