Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use Android to achieve drop-down refresh effect" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use Android to achieve drop-down refresh effect" article can help you solve the problem.

Effect:

1. Analysis

You can decompose the animation into:

The open-eyed donkey rotates around the central earth, and when it reaches the center of the earth, it switches to the donkey with closed eyes, and finally launches it.

The earth rotates itself, rises slowly as it pulls down, and stops rising after reaching a radius distance.

A satellite that moves up and down

2. Realize

(1) download Market app, then change its suffix to zip and decompress to get the resource images we need:

(2) Let's move the satellite up and down first.

Core code:

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); Matrix matrixPlanet = new Matrix (); matrixPlanet.setScale (0.4f, 0.4f); matrixPlanet.postTranslate (locationX / 2 * 3, locationY / 4); matrixPlanet.postTranslate (0, upDateY); canvas.drawBitmap (flyingPlanet,matrixPlanet,null);} public void startTranslatePlanet (int duration) {ValueAnimator valueAnimator = new ValueAnimator () ValueAnimator.setFloatValues (- 50.0f, 50.0f); valueAnimator.setDuration (duration); valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {upDateY = (float) animation.getAnimatedValue (); invalidate ();}}); valueAnimator.setRepeatCount (ValueAnimator.INFINITE) ValueAnimator.setRepeatMode (ValueAnimator.REVERSE); valueAnimator.setInterpolator (new LinearInterpolator ()); valueAnimator.start ();}

Idea: use Matrix to set the graphics transformation, call setScale () to set the Bitmap zoom size, and then call postTranslate () to pan the Bitmap to the initial position of the satellite. Finally, use ValueAnimator to calculate the distance the satellite moves up and down, and then call postTranslate ().

(3) the earth rotates itself, rises slowly with the drop, and stops rising after reaching the radius distance.

Core code:

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); Matrix matrixBall = new Matrix (); matrixBall.setScale (0.2f, 0.2f); if ((locationY + upDateY) > (locationY-flyingBall_Height / 2)) {matrixBall.postTranslate (locationX-flyingBall_Width / 2, locationY + upDateY); matrixBall.postRotate (degreeBall, locationX, (locationY + upDateY + flyingBall_Height / 2)) } else {matrixBall.postTranslate (locationX-flyingBall_Width / 2, locationY-flyingBall_Height / 2); matrixBall.postRotate (degreeBall, locationX, locationY);} canvas.drawBitmap (flyingBall, matrixBall, null); canvas.drawBitmap (cloudBig, null, rectfCloudBig, null); canvas.drawBitmap (cloudSmall, null, rectfCloudSmall, null) } public void startBallAnim (long duration) {ValueAnimator valueAnimator = new ValueAnimator (); valueAnimator.setFloatValues (0.0f, 360.0f); valueAnimator.setDuration (duration); valueAnimator.addUpdateListener (new ValueAnimator.AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {degreeBall = (float) animation.getAnimatedValue (); invalidate () }}); valueAnimator.setRepeatCount (ValueAnimator.INFINITE); valueAnimator.setInterpolator (new LinearInterpolator ()); valueAnimator.start ();} public void UpBall (float offsetY) {if (upDateYautomatically created offsetY) {upDateY = offsetY; invalidate ();}} public void accelerateBall (long duration) {clearAnimation (); startBallAnim (duration) }

Idea: also use Matrix, set the zoom size first. Call

MatrixBall.postTranslate (locationX-flyingBall_Width / 2, locationY + upDateY)

Hide the bitmap below the visual range of the view, then get the change of the Y coordinate of the drop-down refresh through the drop-down refresh list, and call postTranslate () to move the distance of the change amount up. The implementation of the rotation animation is to call the postRotate () method and use ValueAnimator to get the changes. Because the earth is rising, we need to set the center of rotation dynamically.

MatrixBall.postRotate (degreeBall, locationX, (locationY + upDateY + flyingBall_Height / 2))

You just need to change the change minus the drop-down refresh list to get the Y coordinate of the drop-down refresh.

(3) the open-eyed donkey rotates around the central earth, and when it reaches the center of the earth, it switches to the donkey with closed eyes, and finally launches it.

Core code:

@ Override protected void onDraw (Canvas canvas) {super.onDraw (canvas); Matrix matrix = new Matrix (); matrix.setScale (0.3f, 0.3f); matrix.postTranslate (pointDonkey.getDx (), pointDonkey.getDy ()); matrix.postRotate (degree, locationX, locationY + flyingBall_Width / 2); matrix.postTranslate (0, upDateY); canvas.drawBitmap (flyingDonkey, matrix, null);}

Idea: as above, first call setScale () to set the zoom size, when translating and rotating.

Matrix.postRotate (degree, locationX, locationY + flyingBall_Width / 2); matrix.postTranslate (0, upDateY)

We first rotate around the earth that has not yet moved, and then call postTranslate () to rise with the earth.

This is the end of the content about "how to use Android to achieve drop-down refresh effect". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.