Custom view-- cloud effects whale

Recently yourself implements a custom view whales as Netease cloud cloud effect, which is to achieve results.

table of Contents

It is divided into two areas:

1. Rotation and shearing
2. Diffusion of water ripples

1. The rotation and shearing

Picture cut, mainly using ImageView of setOutlineProviderthis method,

roundImage.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        int width = roundImage.getWidth();
        int height = roundImage.getHeight();
        outline.setOval(0, 0, width, height);
    }
});
roundImage.setClipToOutline(true);
复制代码

Then rotated by property animation

//属性动画让roundImage旋转起来
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(roundImage, "rotation", 0, 360);
objectAnimator.setDuration(15000);
objectAnimator.setRepeatMode(ValueAnimator.RESTART);
objectAnimator.setInterpolator(new LinearInterpolator());
objectAnimator.setRepeatCount(-1);
objectAnimator.start();
复制代码

About ObjectAnimator can refer to this article

juejin.im/post/579f02…

2. The diffusion of water wave

Mainly in DiffuseView gradually circle the class below, then refresh delay.

1. First need mMaxRadiusWidthand mMinRadiusWidththese two parameters to obtain the minimum and maximum radius of the circle, which mMaxRadiusWidthcan be onMeasureacquired in

   In the high to obtain a wide onMeasure

   mMaxRadiusWidth = Math.min(getMeasuredHeight() / 2, getMeasuredWidth() / 2);
   复制代码

   ps: Note that the use getWidthand getHeightthe method can be problematic

2. Then these two parameters representative of the radius of the circle, and a corresponding transparency

   private List<Integer> mAlphas = new ArrayList<>();
   
   private List<Integer> mWidths = new ArrayList<>();
   复制代码

3. You may need: how to convert into pixels dp

   float twelveDp = TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 12, 
                   mContext.getResources().getDisplayMetrics() );
   复制代码

4. Then in onDrawthe circle, each painted update mAlphasand mWidthsvalues, while the need to address the proliferation of additions and deletions round

   for (int i = 0; i < mAlphas.size(); i++) {
       Integer alpha = mAlphas.get(i);
       mPaint.setAlpha(alpha);
       Integer width = mWidths.get(i);
       canvas.drawCircle(getWidth() / 2, getHeight() / 2, width, mPaint);
   
       if (alpha >= 2 && width <= mMaxRadiusWidth) {
           mAlphas.set(i, alpha - 2);
           mWidths.set(i, width + 1);
       } else if (width <= mMinRadiusWidth) {
           mWidths.set(i, width + 1);
       }
   }
   复制代码

5. Then refresh delay

   if (mIsDiffuse) {
       postInvalidateDelayed(30);
   }
   复制代码

6. Note: By setting mIsDiffuse parameters to control the spread of the circle animation on and off

   Such open animation in activity in:

   diffuseView.start();
   复制代码

This is my github address, if you have any questions or suggestions, please ask questions through the issue, while welcoming the star, I will occasionally update on github write their own custom view

github address

This article also made reference to:

Android YORK imitation sound dynamic efficiency cloud cloud whale

Android custom circular diffusion of View

Reproduced in: https: //juejin.im/post/5d033e46e51d4550723b13e6