超好看的下拉刷新动画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）; } }）;

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

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