超好看的下拉刷新动画Android代码实现

最近看到了好多高端、大气、上档次的动画效果，如果给你的项目中加上这些动画，相信你的app一定很优秀，今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画。

首先我们看一下效果如何：

怎么样？是不是很高大上？接下来我们看一下代码：

一、首先我们需要自定义刷新的动态RefreshView（也就是下拉时候的头）
1.初始化头所占用的Dimens

private void initiateDimens() { 
    mScreenWidth = mContext.getResources().getDisplayMetrics().widthPixels; 
    mJetTopOffset = mParent.getTotalDragDistance() * 0.5f; 
    mTop = -mParent.getTotalDragDistance(); 
  } 

2.为头填充图片，设置图片的大小
分别为左边的云彩，右边的云彩，中间的云彩还有中间的飞机，飞机是带有动画的，下面会介绍飞机的动画

private void createBitmaps() { 
    mLeftClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_left); 
    mRightClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_right); 
    mFrontClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_center); 
    mJet = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.airplane); 
 
    mJetWidthCenter = mJet.getWidth() / 2; 
    mJetHeightCenter = mJet.getHeight() / 2; 
    mFrontCloudWidthCenter = mFrontClouds.getWidth() / 2; 
    mFrontCloudHeightCenter = mFrontClouds.getHeight() / 2; 
 
    mRightCloudsWidthCenter = mRightClouds.getWidth() / 2; 
    mRightCloudsHeightCenter = mRightClouds.getHeight() / 2; 
    mLeftCloudsWidthCenter = mLeftClouds.getWidth() / 2; 
    mLeftCloudsHeightCenter = mLeftClouds.getHeight() / 2; 
  } 

3.然后我们来画这个头

public void draw(@NonNull Canvas canvas) { 
    final int saveCount = canvas.save(); 
 
    // DRAW BACKGROUND. 
    canvas.drawColor(mContext.getResources().getColor(R.color.sky_background)); 
 
    if (isRefreshing) { 
      // Set up new set of wind 
      while (mWinds.size() < WIND_SET_AMOUNT) { 
        float y = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT)); 
        float x = random(MIN_WIND_X_OFFSET, MAX_WIND_X_OFFSET); 
 
        // Magic with checking interval between winds 
        if (mWinds.size() > 1) { 
          y = 0; 
          while (y == 0) { 
            float tmp = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT)); 
 
            for (Map.Entry<Float, Float> wind : mWinds.entrySet()) { 
              // We want that interval will be greater than fifth part of draggable distance 
              if (Math.abs(wind.getKey() - tmp) > mParent.getTotalDragDistance() / RANDOM_Y_COEFFICIENT) { 
                y = tmp; 
              } else { 
                y = 0; 
                break; 
              } 
            } 
          } 
        } 
 
        mWinds.put(y, x); 
        drawWind(canvas, y, x); 
      } 
 
      // Draw current set of wind 
      if (mWinds.size() >= WIND_SET_AMOUNT) { 
        for (Map.Entry<Float, Float> wind : mWinds.entrySet()) { 
          drawWind(canvas, wind.getKey(), wind.getValue()); 
        } 
      } 
 
      // We should to create new set of winds 
      if (mInverseDirection && mNewWindSet) { 
        mWinds.clear(); 
        mNewWindSet = false; 
        mWindLineWidth = random(MIN_WIND_LINE_WIDTH, MAX_WIND_LINE_WIDTH); 
      } 
 
      // needed for checking direction 
      mLastAnimationTime = mLoadingAnimationTime; 
    } 
 
    drawJet(canvas); 
    drawSideClouds(canvas); 
    drawCenterClouds(canvas); 
 
    canvas.restoreToCount(saveCount); 
  } 

/** 
   * Draw wind on loading animation 
   * 
   * @param canvas - area where we will draw 
   * @param y    - y position fot one of lines 
   * @param xOffset - x offset for on of lines 
   */ 
  private void drawWind(Canvas canvas, float y, float xOffset) { 
    /* We should multiply current animation time with this coefficient for taking all screen width in time 
    Removing slowing of animation with dividing on {@LINK #SLOW_DOWN_ANIMATION_COEFFICIENT} 
    And we should don't forget about distance that should "fly" line that depend on screen of device and x offset 
    */ 
    float cof = (mScreenWidth + xOffset) / (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT); 
    float time = mLoadingAnimationTime; 
 
    // HORRIBLE HACK FOR REVERS ANIMATION THAT SHOULD WORK LIKE RESTART ANIMATION 
    if (mLastAnimationTime - mLoadingAnimationTime > 0) { 
      mInverseDirection = true; 
      // take time from 0 to end of animation time 
      time = (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT) - mLoadingAnimationTime; 
    } else { 
      mNewWindSet = true; 
      mInverseDirection = false; 
    } 
 
    // Taking current x position of drawing wind 
    // For fully disappearing of line we should subtract wind line width 
    float x = (mScreenWidth - (time * cof)) + xOffset - mWindLineWidth; 
    float xEnd = x + mWindLineWidth; 
 
    canvas.drawLine(x, y, xEnd, y, mWindPaint); 
  } 
 
  private void drawSideClouds(Canvas canvas) { 
    Matrix matrixLeftClouds = mMatrix; 
    Matrix matrixRightClouds = mAdditionalMatrix; 
    matrixLeftClouds.reset(); 
    matrixRightClouds.reset(); 
 
    // Drag percent will newer get more then 1 here 
    float dragPercent = Math.min(1f, Math.abs(mPercent)); 
 
    boolean overdrag = false; 
 
    // But we check here for overdrag 
    if (mPercent > 1.0f) { 
      overdrag = true; 
    } 
 
    float scale; 
    float scalePercentDelta = dragPercent - SCALE_START_PERCENT; 
    if (scalePercentDelta > 0) { 
      float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT); 
      scale = SIDE_CLOUDS_INITIAL_SCALE + (SIDE_CLOUDS_FINAL_SCALE - SIDE_CLOUDS_INITIAL_SCALE) * scalePercent; 
    } else { 
      scale = SIDE_CLOUDS_INITIAL_SCALE; 
    } 
 
    // Current y position of clouds 
    float dragYOffset = mParent.getTotalDragDistance() * (1.0f - dragPercent); 
 
    // Position where clouds fully visible on screen and we should drag them with content of listView 
    int cloudsVisiblePosition = mParent.getTotalDragDistance() / 2 - mLeftCloudsHeightCenter; 
 
    boolean needMoveCloudsWithContent = false; 
    if (dragYOffset < cloudsVisiblePosition) { 
      needMoveCloudsWithContent = true; 
    } 
 
    float offsetRightX = mScreenWidth - mRightClouds.getWidth(); 
    float offsetRightY = (needMoveCloudsWithContent 
        ? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight() 
        : dragYOffset) 
        + (overdrag ? mTop : 0); 
 
    float offsetLeftX = 0; 
    float offsetLeftY = (needMoveCloudsWithContent 
        ? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight() 
        : dragYOffset) 
        + (overdrag ? mTop : 0); 
 
    // Magic with animation on loading process 
    if (isRefreshing) { 
      if (checkCurrentAnimationPart(AnimationPart.FIRST)) { 
        offsetLeftY += getAnimationPartValue(AnimationPart.FIRST) / Y_SIDE_CLOUDS_SLOW_DOWN_COF; 
        offsetRightX -= getAnimationPartValue(AnimationPart.FIRST) / X_SIDE_CLOUDS_SLOW_DOWN_COF; 
      } else if (checkCurrentAnimationPart(AnimationPart.SECOND)) { 
        offsetLeftY += getAnimationPartValue(AnimationPart.SECOND) / Y_SIDE_CLOUDS_SLOW_DOWN_COF; 
        offsetRightX -= getAnimationPartValue(AnimationPart.SECOND) / X_SIDE_CLOUDS_SLOW_DOWN_COF; 
      } else if (checkCurrentAnimationPart(AnimationPart.THIRD)) { 
        offsetLeftY -= getAnimationPartValue(AnimationPart.THIRD) / Y_SIDE_CLOUDS_SLOW_DOWN_COF; 
        offsetRightX += getAnimationPartValue(AnimationPart.THIRD) / X_SIDE_CLOUDS_SLOW_DOWN_COF; 
      } else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) { 
        offsetLeftY -= getAnimationPartValue(AnimationPart.FOURTH) / X_SIDE_CLOUDS_SLOW_DOWN_COF; 
        offsetRightX += getAnimationPartValue(AnimationPart.FOURTH) / Y_SIDE_CLOUDS_SLOW_DOWN_COF; 
      } 
    } 
 
    matrixRightClouds.postScale(scale, scale, mRightCloudsWidthCenter, mRightCloudsHeightCenter); 
    matrixRightClouds.postTranslate(offsetRightX, offsetRightY); 
 
    matrixLeftClouds.postScale(scale, scale, mLeftCloudsWidthCenter, mLeftCloudsHeightCenter); 
    matrixLeftClouds.postTranslate(offsetLeftX, offsetLeftY); 
 
    canvas.drawBitmap(mLeftClouds, matrixLeftClouds, null); 
    canvas.drawBitmap(mRightClouds, matrixRightClouds, null); 
  } 
 
  private void drawCenterClouds(Canvas canvas) { 
    Matrix matrix = mMatrix; 
    matrix.reset(); 
    float dragPercent = Math.min(1f, Math.abs(mPercent)); 
 
    float scale; 
    float overdragPercent = 0; 
    boolean overdrag = false; 
 
    if (mPercent > 1.0f) { 
      overdrag = true; 
      // Here we want know about how mach percent of over drag we done 
      overdragPercent = Math.abs(1.0f - mPercent); 
    } 
 
    float scalePercentDelta = dragPercent - SCALE_START_PERCENT; 
    if (scalePercentDelta > 0) { 
      float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT); 
      scale = CENTER_CLOUDS_INITIAL_SCALE + (CENTER_CLOUDS_FINAL_SCALE - CENTER_CLOUDS_INITIAL_SCALE) * scalePercent; 
    } else { 
      scale = CENTER_CLOUDS_INITIAL_SCALE; 
    } 
 
    float parallaxPercent = 0; 
    boolean parallax = false; 
    // Current y position of clouds 
    float dragYOffset = mParent.getTotalDragDistance() * dragPercent; 
    // Position when should start parallax scrolling 
    int startParallaxHeight = mParent.getTotalDragDistance() - mFrontCloudHeightCenter; 
 
    if (dragYOffset > startParallaxHeight) { 
      parallax = true; 
      parallaxPercent = dragYOffset - startParallaxHeight; 
    } 
 
    float offsetX = (mScreenWidth / 2) - mFrontCloudWidthCenter; 
    float offsetY = dragYOffset 
        - (parallax ? mFrontCloudHeightCenter + parallaxPercent : mFrontCloudHeightCenter) 
        + (overdrag ? mTop : 0); 
 
    float sx = overdrag ? scale + overdragPercent / 4 : scale; 
    float sy = overdrag ? scale + overdragPercent / 2 : scale; 
 
    if (isRefreshing && !overdrag) { 
      if (checkCurrentAnimationPart(AnimationPart.FIRST)) { 
        sx = scale - (getAnimationPartValue(AnimationPart.FIRST) / LOADING_ANIMATION_COEFFICIENT) / 8; 
      } else if (checkCurrentAnimationPart(AnimationPart.SECOND)) { 
        sx = scale - (getAnimationPartValue(AnimationPart.SECOND) / LOADING_ANIMATION_COEFFICIENT) / 8; 
      } else if (checkCurrentAnimationPart(AnimationPart.THIRD)) { 
        sx = scale + (getAnimationPartValue(AnimationPart.THIRD) / LOADING_ANIMATION_COEFFICIENT) / 6; 
      } else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) { 
        sx = scale + (getAnimationPartValue(AnimationPart.FOURTH) / LOADING_ANIMATION_COEFFICIENT) / 6; 
      } 
      sy = sx; 
    } 
 
    matrix.postScale(sx, sy, mFrontCloudWidthCenter, mFrontCloudHeightCenter); 
    matrix.postTranslate(offsetX, offsetY); 
 
    canvas.drawBitmap(mFrontClouds, matrix, null); 
  } 
 
  private void drawJet(Canvas canvas) { 
    Matrix matrix = mMatrix; 
    matrix.reset(); 
 
    float dragPercent = mPercent; 
    float rotateAngle = 0; 
 
    // Check overdrag 
    if (dragPercent > 1.0f && !mEndOfRefreshing) { 
      rotateAngle = (dragPercent % 1) * 10; 
      dragPercent = 1.0f; 
    } 
 
    float offsetX = ((mScreenWidth * dragPercent) / 2) - mJetWidthCenter; 
 
    float offsetY = mJetTopOffset 
        + (mParent.getTotalDragDistance() / 2) 
        * (1.0f - dragPercent) 
        - mJetHeightCenter; 
 
    if (isRefreshing) { 
      if (checkCurrentAnimationPart(AnimationPart.FIRST)) { 
        offsetY -= getAnimationPartValue(AnimationPart.FIRST); 
      } else if (checkCurrentAnimationPart(AnimationPart.SECOND)) { 
        offsetY -= getAnimationPartValue(AnimationPart.SECOND); 
      } else if (checkCurrentAnimationPart(AnimationPart.THIRD)) { 
        offsetY += getAnimationPartValue(AnimationPart.THIRD); 
      } else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) { 
        offsetY += getAnimationPartValue(AnimationPart.FOURTH); 
      } 
    } 
 
    matrix.setTranslate(offsetX, offsetY); 
 
    if (dragPercent == 1.0f) { 
      matrix.preRotate(rotateAngle, mJetWidthCenter, mJetHeightCenter); 
    } 
 
    canvas.drawBitmap(mJet, matrix, null); 
  } 

动画效果已经画好了，下面我们来看看怎么结合下拉刷新来调用吧？
二、我们还需要自定义一个PullToRefreshView（下拉刷新）
1.我们的PullToRefreshView这里需要继承ViewGroup
我们先把刚才定义的刷新时的动画加进来

private RefreshView mRefreshView; 
<pre name="code" class="java">private ImageView mRefreshImageView; 
<pre name="code" class="java">mRefreshImageView = new ImageView(context); 
    mRefreshView = new RefreshView(getContext(), this); 
    mRefreshImageView.setImageDrawable(mRefreshView); 
 
    addView(mRefreshImageView); 

2.然后我们设置OntouchEvent()事件

@Override 
  public boolean onTouchEvent(@NonNull MotionEvent ev) { 
 
    if (!mIsBeingDragged) { 
      return super.onTouchEvent(ev); 
    } 
 
    final int action = MotionEventCompat.getActionMasked(ev); 
 
    switch (action) { 
      case MotionEvent.ACTION_MOVE: { 
        final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId); 
        if (pointerIndex < 0) { 
          return false; 
        } 
 
        final float y = MotionEventCompat.getY(ev, pointerIndex); 
        final float yDiff = y - mInitialMotionY; 
        final float scrollTop = yDiff * DRAG_RATE; 
        mCurrentDragPercent = scrollTop / mTotalDragDistance; 
        if (mCurrentDragPercent < 0) { 
          return false; 
        } 
        float boundedDragPercent = Math.min(1f, Math.abs(mCurrentDragPercent)); 
        float extraOS = Math.abs(scrollTop) - mTotalDragDistance; 
        float slingshotDist = mTotalDragDistance; 
        float tensionSlingshotPercent = Math.max(0, 
            Math.min(extraOS, slingshotDist * 2) / slingshotDist); 
        float tensionPercent = (float) ((tensionSlingshotPercent / 4) - Math.pow( 
            (tensionSlingshotPercent / 4), 2)) * 2f; 
        float extraMove = (slingshotDist) * tensionPercent / 2; 
        int targetY = (int) ((slingshotDist * boundedDragPercent) + extraMove); 
 
        mRefreshView.setPercent(mCurrentDragPercent); 
        setTargetOffsetTop(targetY - mCurrentOffsetTop, true); 
        break; 
      } 
      case MotionEventCompat.ACTION_POINTER_DOWN: 
        final int index = MotionEventCompat.getActionIndex(ev); 
        mActivePointerId = MotionEventCompat.getPointerId(ev, index); 
        break; 
      case MotionEventCompat.ACTION_POINTER_UP: 
        onSecondaryPointerUp(ev); 
        break; 
      case MotionEvent.ACTION_UP: 
      case MotionEvent.ACTION_CANCEL: { 
        if (mActivePointerId == INVALID_POINTER) { 
          return false; 
        } 
        final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId); 
        final float y = MotionEventCompat.getY(ev, pointerIndex); 
        final float overScrollTop = (y - mInitialMotionY) * DRAG_RATE; 
        mIsBeingDragged = false; 
        if (overScrollTop > mTotalDragDistance) { 
          setRefreshing(true, true); 
        } else { 
          mRefreshing = false; 
          animateOffsetToPosition(mAnimateToStartPosition); 
        } 
        mActivePointerId = INVALID_POINTER; 
        return false; 
      } 
    } 
 
    return true; 
  } 

三、最后我们看怎样在Activity中使用这个下拉刷新控件
1.先看一下布局文件
这里是我们的下拉刷新空间嵌套着我们的ListView，然后我们再给ListView填充数据即可

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  tools:context=".PullToRefreshActivity"> 
 
  <com.hankkin.AnimationPullToRefreshDemo.PullToRefreshView 
    android:id="@+id/pull_to_refresh" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
 
    <ListView 
      android:id="@+id/list_view" 
      android:divider="@null" 
      android:dividerHeight="0dp" 
      android:fadingEdge="none" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 
 
  </com.hankkin.AnimationPullToRefreshDemo.PullToRefreshView> 
 
</RelativeLayout> 

2.为ListView填充数据
为了我们的效果比较好看，这里我们给ListView的每一个item填充不同的颜色，看起来会比较高大上。

Map<String, Integer> map; 
    List<Map<String, Integer>> sampleList = new ArrayList<Map<String, Integer>>(); 
 
 
    int[] colors = { 
        R.color.saffron, 
        R.color.eggplant, 
        R.color.sienna}; 
 
    int[] tripNames = { 
        R.string.trip_to_india, 
        R.string.trip_to_italy, 
        R.string.trip_to_indonesia}; 
 
    for (int i = 0; i < tripNames.length; i++) { 
      map = new HashMap<String, Integer>(); 
      map.put(SampleAdapter.KEY_NAME, tripNames[i]); 
      map.put(SampleAdapter.KEY_COLOR, colors[i]); 
      sampleList.add(map); 
    } 
 
    ListView listView = (ListView) findViewById(R.id.list_view); 
    listView.setAdapter(new SampleAdapter(this, R.layout.list_item, sampleList)); 

3.最后，我们再设置一下下拉刷新的监听事件就OK了

mPullToRefreshView = (PullToRefreshView) findViewById(R.id.pull_to_refresh); 
    mPullToRefreshView.setOnRefreshListener(new PullToRefreshView.OnRefreshListener() { 
      @Override 
      public void onRefresh() { 
        mPullToRefreshView.postDelayed(new Runnable() { 
          @Override 
          public void run() { 
            mPullToRefreshView.setRefreshing(false); 
          } 
        }, REFRESH_DELAY); 
      } 
    }); 

怎么样？有没有很高大上啊？

大家可以动手实践一下，希望对大家的学习有所帮助。