自定義view--鯨雲特效

最近本身動手實現了一個像網易雲鯨雲特效的自定義view，這是實現效果。

目錄

主要分爲2個方面：

1. 旋轉和剪切
2. 水波紋的擴散

1.旋轉和剪切

圖片剪切，主要利用ImageView的setOutlineProvider這個方法，

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);
複製代碼

而後經過屬性動畫來旋轉

//屬性動畫讓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();
複製代碼

關於ObjectAnimator可參考這篇文章

juejin.im/post/579f02…

2.水波紋的擴散

主要是在 DiffuseView 這個類下面逐步畫圈，而後延時刷新。

1. 首先須要在mMaxRadiusWidth和mMinRadiusWidth這兩個參數來取得畫圈半徑的最小值和最大值，其中mMaxRadiusWidth能夠在onMeasure中獲取

   在onMeasure中得到寬高

   mMaxRadiusWidth = Math.min(getMeasuredHeight() / 2, getMeasuredWidth() / 2);
   複製代碼

   ps：注意，使用getWidth 和getHeight 方法可能會出現問題

2. 而後用這兩個參數表明圓圈半徑，和對應透明度

   private List<Integer> mAlphas = new ArrayList<>();
   
   private List<Integer> mWidths = new ArrayList<>();
   複製代碼

3. 可能須要：如何將dp轉換成pixels

   float twelveDp = TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 12, 
                   mContext.getResources().getDisplayMetrics() );
   複製代碼

4. 而後就在onDraw中畫圓，每畫一次更新mAlphas和mWidths中的值，同時須要處理好擴散圓的增長和刪除

   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. 而後延時刷新

   if (mIsDiffuse) {
       postInvalidateDelayed(30);
   }
   複製代碼

6. 注意：經過設置mIsDiffuse參數來控制擴散圓動畫的開啓和關閉

   在activity中這樣開啓動畫：

   diffuseView.start();
   複製代碼

這是個人github地址，若是有什麼問題和建議，歡迎經過issue提問，同時歡迎star，我會不按期地更新本身寫的自定義view在github上

github地址

本文還參考了：

Android仿網易雲鯨雲音效動效

Android 自定義控件之圓形擴散View