Android模仿知乎的回答详情页的动画效果

2019-12-10 19:03:34丽君

    其实布局很简单,咱们一个效果一个效果的来实现。
    首先是下面的Tools如何显示和隐藏呢?当然是用动画了!什么动画呢?能实现的有属性动画和帧动画,属性动画能够真实的改变View的属性,帧动画只是视觉上移动了,View的实际属性并不改变,这两种都可以,我们这里使用属性动画

/** 
  * 显示工具栏 
  */ 
 private void showTools() { 
 
  ObjectAnimator anim = ObjectAnimator.ofFloat(img_tools, "y", img_tools.getY(), 
    img_tools.getY() - img_tools.getHeight()); 
  anim.setDuration(TIME_ANIMATION); 
  anim.start(); 
 
  isToolsHide = false; 
 } 
 
 /** 
  * 隐藏工具栏 
  */ 
 private void hideTools() { 
 
  ObjectAnimator anim = ObjectAnimator.ofFloat(img_tools, "y", img_tools.getY(), 
    img_tools.getY() + img_tools.getHeight()); 
  anim.setDuration(TIME_ANIMATION); 
  anim.start(); 
 
  isToolsHide = true; 
 
 } 

    那么什么时候调用呢?从上面的需求分析中,我们知道,用户手指下拉的时候,Tools显示,反之隐藏,那么我们就可以监听ScrollView的onTouch,判断手指方向,实现动画效果的调用

mScroller.setOnTouchListener(new View.OnTouchListener() { 
   @Override 
   public boolean onTouch(View v, MotionEvent event) { 
 
 
    switch (event.getAction()) { 
 
     case MotionEvent.ACTION_DOWN: 
      lastY = event.getY(); 
      break; 
     case MotionEvent.ACTION_MOVE: 
 
      float disY = event.getY() - lastY; 
 
      //垂直方向滑动 
      if (Math.abs(disY) > viewSlop) { 
       //是否向上滑动 
       isUpSlide = disY < 0; 
 
       //实现底部tools的显示与隐藏 
       if (isUpSlide) { 
        if (!isToolsHide) 
         hideTools(); 
       } else { 
        if (isToolsHide) 
         showTools(); 
       } 
      } 
 
      break; 
    } 
 
    return false; 
   } 
  }); 

     用变量isToolsHide放置代码重复调用。

    下面的Tools的问题解决了,我们再看一下上面的布局动画如何来实现。上面的思路和下面一样,也是通过属性动画,完成位置的移动,移动的布局有Bar、Title和根布局。为什么答题人布局Author不移动呢?因为根布局必须移动,否则就会挡住下面的文字内容,根布局的移动会让子布局都跟着移动,所以只移动根布局即可。