Android水波纹搜索效果

Tips：Android，蓝牙搜索设备，水波纹效果

效果图：

源码：

public class RippleAnimationView extends RelativeLayout {

    private Paint mPaint;
    public static final int STROKE_WIDTH = 5;
    List<View> views = new ArrayList<>();
    private boolean animationRunning = false;

    public RippleAnimationView(Context context) {
        super(context);
    }

    public RippleAnimationView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗锯齿
        int radius = (int) context.getResources().getDimension(com.kl.common.R.dimen.dp_150);//初始大小
        int rippleColor = ContextCompat.getColor(context, R.color.rippleColor);
        mPaint.setStrokeWidth(STROKE_WIDTH);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(rippleColor);

        //        延迟时间
        int rippleDuration = 3500;
        int singleDelay = rippleDuration / 4;//间隔时间 （上一个波纹  和下一个波纹的）
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(radius + STROKE_WIDTH, radius + STROKE_WIDTH);
        params.addRule(CENTER_IN_PARENT);
        for (int i = 0; i < 4; i++) {
            RippleCircleView rippleCircleView = new RippleCircleView(this);
            addView(rippleCircleView, params);
            views.add(rippleCircleView);

            PropertyValuesHolder aplhaHolder = PropertyValuesHolder.ofFloat("Alpha", 1, 0);
            PropertyValuesHolder scaleXHolder = PropertyValuesHolder.ofFloat("scaleX", 2);
            PropertyValuesHolder scaleYHolder = PropertyValuesHolder.ofFloat("scaleY", 2);
            ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(rippleCircleView, aplhaHolder, scaleXHolder, scaleYHolder);
            animator.setDuration(rippleDuration);
            animator.setStartDelay(i * singleDelay);
            animator.setRepeatMode(ObjectAnimator.RESTART);
            animator.setRepeatCount(ObjectAnimator.INFINITE);
            rippleCircleView.setTag(animator);
        }
    }

    /**
     * 启动动画
     */
    public void startRippleAnimation() {
        if (!animationRunning) {
            for (View rippleView : views) {
                rippleView.setVisibility(VISIBLE);
                ((ObjectAnimator) rippleView.getTag()).start();
            }
            animationRunning = true;
        }

    }

    /**
     * 停止动画
     */
    public void stopRippleAnimation() {
        if (animationRunning) {
            Collections.reverse(views);
            for (View rippleView : views) {
                rippleView.setVisibility(INVISIBLE);
                ((ObjectAnimator) rippleView.getTag()).end();
                ((ObjectAnimator) rippleView.getTag()).cancel();
            }
            animationRunning = false;
        }

    }


    public boolean isAnimationRunning() {
        return animationRunning;
    }

    public Paint getPaint() {
        return mPaint;
    }
}

public class RippleCircleView extends View {
    private RippleAnimationView mRippleAnimationView;

    public RippleCircleView(RippleAnimationView rippleAnimationView) {
        super(rippleAnimationView.getContext());
        mRippleAnimationView = rippleAnimationView;
    }

    public RippleCircleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float radius = (float) Math.min(getWidth(), getHeight()) / 2;
        canvas.drawCircle(radius, radius, radius - RippleAnimationView.STROKE_WIDTH, mRippleAnimationView.getPaint());
    }
}

使用：

    <com.kl.analyze.view.RippleAnimationView
        android:id="@+id/ripple_view"
        android:layout_width="@dimen/dp_335"
        android:layout_height="@dimen/dp_335"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/dp_100">

        <ImageView
            android:id="@+id/iv_bluetooth"
            android:layout_width="@dimen/dp_150"
            android:layout_height="@dimen/dp_150"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_search_bluetooth"/>
    </com.kl.analyze.view.RippleAnimationView>

    /**
     * 开始旋转动画
     */
    private fun startRotateAnim() {
        rippleView.startRippleAnimation()
    }

    /**
     * 停止动画
     */
    private fun stopRotateAnim() {
        rippleView.stopRippleAnimation()
    }