最近看到了好多高端、大气、上档次的动画效果，如果给你的项目中加上这些动画，相信你的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); } });
怎么样？有没有很高大上啊？
大家可以动手实践一下，希望对大家的学习有所帮助。