1.效果圖：

2.使用方法：

1. 在xml裡使用RippleImageView自定義控制元件：

   xmlns:app="http://schemas.android.com/apk/res-auto"
   
   <com.army.rippleimage.RippleImageView
       android:id="@+id/rippleImageView"
       android:layout_width="match_parent"
       android:layout_height="180dp"
       android:background="#37B158"
       app:show_spacing_time="800"//動畫播放間隔時間
       app:imageViewWidth="35dp"//圖片的大小
       app:imageViewHeigth="35dp"
       android:layout_centerHorizontal="true">
   </com.army.rippleimage.RippleImageView>
    
   

2. 在Activity中的使用：

   rippleImageView=(RippleImageView)findViewById(R.id.rippleImageView);
   //開始動畫
   rippleImageView.startWaveAnimation();
   
   //停止動畫
   rippleImageView.stopWaveAnimation();
   

3.如何將自定義控制元件引入到專案：

1. 拷貝自定義控制元件RippleImageView

   /**
    * Description :
    * Author : liujun
    * Email  : [email protected]
    */
   public class RippleImageView extends RelativeLayout {
       private static final int SHOW_SPACING_TIME=700;
       private static final int MSG_WAVE2_ANIMATION = 1;
       private static final int MSG_WAVE3_ANIMATION = 2;
       private static final int IMAMGEVIEW_SIZE = 80;
       /**三張波紋圖片*/
       private static final int SIZE =3 ;
   
       /**動畫預設迴圈播放時間*/
       private  int show_spacing_time=SHOW_SPACING_TIME;
       /**初始化動畫集*/
       private AnimationSet [] mAnimationSet=new AnimationSet[SIZE];
       /**水波紋圖片*/
       private ImageView [] imgs=new ImageView[SIZE];
       /**背景圖片*/
       private ImageView img_bg;
       /**水波紋和背景圖片的大小*/
       private float imageViewWidth=IMAMGEVIEW_SIZE;
       private float imageViewHeigth=IMAMGEVIEW_SIZE;
   
       private Handler mHandler = new Handler() {
           @Override
           public void handleMessage(Message msg) {
               switch (msg.what) {
                   case MSG_WAVE2_ANIMATION:
                       imgs[MSG_WAVE2_ANIMATION].startAnimation(mAnimationSet[MSG_WAVE2_ANIMATION]);
                       break;
                   case MSG_WAVE3_ANIMATION:
                       imgs[MSG_WAVE2_ANIMATION].startAnimation(mAnimationSet[MSG_WAVE3_ANIMATION]);
                       break;
               }
   
           }
       };
   
       public RippleImageView(Context context) {
           super(context);
           initView(context);
       }
   
       public RippleImageView(Context context, AttributeSet attrs) {
           super(context, attrs);
           getAttributeSet(context,attrs);
           initView(context);
       }
   
       /**
        * 獲取xml屬性
        * @param context
        * @param attrs
        */
       private void getAttributeSet(Context context, AttributeSet attrs) {
           TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.custume_ripple_imageview);
   
           show_spacing_time = typedArray.getInt(R.styleable.custume_ripple_imageview_show_spacing_time, SHOW_SPACING_TIME);
           imageViewWidth = typedArray.getDimension(R.styleable.custume_ripple_imageview_imageViewWidth, IMAMGEVIEW_SIZE);
           imageViewHeigth = typedArray.getDimension(R.styleable.custume_ripple_imageview_imageViewHeigth, IMAMGEVIEW_SIZE);
           Log.d("TAG","show_spacing_time="+show_spacing_time+"mm imageViewWidth="+imageViewWidth+"px  imageViewHeigth="+imageViewHeigth+"px");
           typedArray.recycle();
       }
       private void initView(Context context) {
           setLayout(context);
           for (int i = 0; i <imgs.length ; i++) {
               mAnimationSet[i]=initAnimationSet();
           }
       }
   
       /**
        * 開始動態佈局
        */
       private void setLayout(Context context) {
           LayoutParams params=new LayoutParams(dip2px(context,imageViewWidth),dip2px(context,imageViewHeigth));
           //新增一個規則
           params.addRule(RelativeLayout.CENTER_IN_PARENT,RelativeLayout.TRUE);
           /**新增水波紋圖片*/
           for (int i = 0; i <SIZE ; i++) {
               imgs[i] = new ImageView(context);
               imgs[i].setImageResource(R.mipmap.point_empty);
               addView(imgs[i],params);
           }
           LayoutParams params_bg=new LayoutParams(dip2px(context,imageViewWidth)+10,dip2px(context,imageViewHeigth)+10);
           //新增一個規則
           params_bg.addRule(RelativeLayout.CENTER_IN_PARENT,RelativeLayout.TRUE);
           /**新增背景圖片*/
           img_bg=new ImageView(context);
           img_bg.setImageResource(R.mipmap.point_org);
           addView(img_bg,params_bg);
       }
   
       /**
        * 初始化動畫集
        * @return
        */
       private AnimationSet initAnimationSet() {
           AnimationSet as = new AnimationSet(true);
           //縮放度：變大兩倍
           ScaleAnimation sa = new ScaleAnimation(1f, 2f, 1f, 2f,
                   ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                   ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
           sa.setDuration(show_spacing_time * 3);
           sa.setRepeatCount(Animation.INFINITE);// 設定迴圈
           //透明度
           AlphaAnimation aa = new AlphaAnimation(1, 0.1f);
           aa.setDuration(show_spacing_time * 3);
           aa.setRepeatCount(Animation.INFINITE);//設定迴圈
           as.addAnimation(sa);
           as.addAnimation(aa);
           return as;
       }
       private static int dip2px(Context context, float dipValue) {
           final float scale = context.getResources().getDisplayMetrics().density;
           return (int) (dipValue * scale + 0.5f);
       }
   
       //============================對外暴露的public方法=========================================
       /**
        * 開始水波紋動畫
        */
       public void startWaveAnimation() {
           imgs[0].startAnimation(mAnimationSet[0]);
           mHandler.sendEmptyMessageDelayed(MSG_WAVE2_ANIMATION, show_spacing_time);
           mHandler.sendEmptyMessageDelayed(MSG_WAVE3_ANIMATION, show_spacing_time * 2);
       }
   
       /**
        * 停止水波紋動畫
        */
       public void stopWaveAnimation() {
           for (int i = 0; i <imgs.length ; i++) {
               imgs[i].clearAnimation();
           }
       }
       /**獲取播放的速度*/
       public int getShow_spacing_time() {
           return show_spacing_time;
       }
       /**設計播放的速度，預設是800毫秒*/
       public void setShow_spacing_time(int show_spacing_time) {
           this.show_spacing_time = show_spacing_time;
       }
    
   

   }

2. 拷貝自定義屬性到arrts下

   <declare-styleable name="custume_ripple_imageview">
       <attr name="show_spacing_time" format="integer"></attr>
       <attr name="imageViewWidth" format="dimension"></attr>
       <attr name="imageViewHeigth" format="dimension"></attr>
   </declare-styleable>
    
   

3. 拷貝預設圖片