先看效果

看起来复杂，但是我们可以分步实现，最后你会发现很简单。

【第一步】：画圆---不断放大的空心圆 -- CircleView

想要的效果是不断扩大的空心圆。
关于这点我们可以有多种思路:
1.画一个空心圆然后根据半径不断增大从而达到效果
2.画两个圆，外圆实心，内圆清除，从而给人一种这样的效果
实验了一下，第二种效果更好一点。
代码如下，很简单。

public class CircleView extends View {
    private static final int CIRCLE_COLOR = 0xFFF85680;
    private Bitmap tempBitmap;
    private Canvas tempCanvas;
    private Paint outerPaint = new Paint();
    private Paint innerPaint = new Paint();    
    private int maxCircleSize;
    private float outerCircleRadiusProgress=0f;
    private float innerCircleRadiusProgress=0f;


    public CircleView(Context context) {
        super(context);
        init();
    }

    private void init() {
        //初始化画笔
        //外圆画笔样式为填充
        outerPaint.setStyle(Paint.Style.FILL);
        outerPaint.setColor(CIRCLE_COLOR);
        //内圆图像混合模式之清除图像
        innerPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        maxCircleSize = w / 2;
        tempBitmap = Bitmap.createBitmap(getWidth(), getWidth(), Bitmap.Config.ARGB_8888);
        tempCanvas = new Canvas(tempBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        tempCanvas.drawColor(0xffffff, PorterDuff.Mode.CLEAR);
        //画外圆
        tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, outerCircleRadiusProgress * maxCircleSize, outerPaint);
        //画内圆
        tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, innerCircleRadiusProgress * maxCircleSize, innerPaint);
        canvas.drawBitmap(tempBitmap, 0, 0, null);
    }
    //对外暴露的属性，设置进度，让圆心动态变化。
    public void setInnerCircleRadiusProgress(float innerCircleRadiusProgress) {
        this.innerCircleRadiusProgress = innerCircleRadiusProgress;
        postInvalidate();
    }

    public void setOuterCircleRadiusProgress(float outerCircleRadiusProgress) {
        this.outerCircleRadiusProgress = outerCircleRadiusProgress;
        postInvalidate();
    }
}

【第二步】：画四周点的视图--DotsView

本质还是画圆，只不过重要的是确定各个圆的圆心位置

    for (int i = 0; i < DOTS_COUNT; i++) {
            int cX = (int) (centerX + currentRadius * Math.cos(i * DOTS_POSITION_ANGLE * Math.PI / 180));
            int cY = (int) (centerY + currentRadius * Math.sin(i * DOTS_POSITION_ANGLE * Math.PI / 180));
            canvas.drawCircle(cX, cY, currentDotSize,ciclePaint);
        }

贴出整个类

public class DotsView extends View {
    //粒子个数
    private static final int DOTS_COUNT = 6;
    //粒子位置角度
    private static final int DOTS_POSITION_ANGLE = 360 / DOTS_COUNT;
    private static final int DOTS_COLOR = 0xFFF85680;
    private float currentProgress = 0f;
    private int centerX;
    private int centerY;
    private float maxDotSize;
    private Paint dotsCiclePaint=new Paint();
    private float currentRadius = 0;
    private float currentDotSize = 0;
    private Paint ciclePaint=new Paint();
    private float maxDotsRadius;

    public DotsView(Context context) {
        super(context);
        init();
    }
    public DotsView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    private void init() {
        ciclePaint.setStyle(Paint.Style.FILL);
        ciclePaint.setColor(DOTS_COLOR);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
        //粒子半径
        maxDotSize = 4;
        //最大半径
         maxDotsRadius= w/2 - maxDotSize * 4;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        drawOuterDotsFrame(canvas);
    }

    private void drawOuterDotsFrame(Canvas canvas) {
        for (int i = 0; i < DOTS_COUNT; i++) {
            int cX = (int) (centerX + currentRadius * Math.cos(i * DOTS_POSITION_ANGLE * Math.PI / 180));
            int cY = (int) (centerY + currentRadius * Math.sin(i * DOTS_POSITION_ANGLE * Math.PI / 180));
            canvas.drawCircle(cX, cY, currentDotSize,ciclePaint);
        }
    }
    public void setCurrentProgress(float currentProgress) {
        this.currentProgress = currentProgress;
        updateOuterDotsPosition();
        postInvalidate();
    }
    private void updateOuterDotsPosition() {
        if (currentProgress < 0.3f) {
            this.currentRadius = (float) mapValueFromRangeToRange(currentProgress, 0.0f, 0.3f, 0, maxDotsRadius * 0.8f);
        } else {
            this.currentRadius = (float) mapValueFromRangeToRange(currentProgress, 0.3f, 1f, 0.8f * maxDotsRadius, maxDotsRadius);
        }

        if (currentProgress < 0.7) {
            this.currentDotSize = maxDotSize;
        } else {
            this.currentDotSize = (float) mapValueFromRangeToRange(currentProgress, 0.7f, 1f, maxDotSize, 0);
        }
    }

    public static double mapValueFromRangeToRange(double value, double fromLow, double fromHigh, double toLow, double toHigh) {
        return toLow + ((value - fromLow) / (fromHigh - fromLow) * (toHigh - toLow));
    }
}

【第三步】：写一个LikeButtonView 把动画组合起来

view_like_button.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content">
    <com.animation.collects.heart.view.DotsView
        android:id="@+id/vDotsView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_gravity="center"/>

    <com.animation.collects.heart.view.CircleView
        android:id="@+id/vCircle"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        />
    <ImageView
        android:id="@+id/ivLike"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="center"
        android:src="@drawable/like_select"/>
</merge>

public class LikeAnimationView extends FrameLayout {
    private static final DecelerateInterpolator DECCELERATE_INTERPOLATOR = new DecelerateInterpolator();
    private static final AccelerateDecelerateInterpolator ACCELERATE_DECELERATE_INTERPOLATOR = new AccelerateDecelerateInterpolator();
    private static final OvershootInterpolator OVERSHOOT_INTERPOLATOR = new OvershootInterpolator(4);
    private boolean isChecked=true;
    private ImageView ivLike;
    private DotsView vDotsView;
    private CircleView vCircleView;
    private AnimatorSet animatorSet;
    public LikeAnimationView(@NonNull Context context) {
        super(context);
        init();
    }

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

    public LikeAnimationView(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        LayoutInflater.from(getContext()).inflate(R.layout.view_like_button, this, true);
        ivLike= (ImageView) findViewById(R.id.ivLike);
        vCircleView= (CircleView) findViewById(R.id.vCircle);
        vDotsView= (com.animation.collects.heart.view.DotsView) findViewById(R.id.vDotsView);
    }
    public void start(){
        ivLike.setImageResource(R.drawable.like_select);
        ivLike.setEnabled(false);
        ivLike.animate().cancel();
        ivLike.setScaleX(0);
        ivLike.setScaleY(0);
        vCircleView.setInnerCircleRadiusProgress(0);
        vCircleView.setOuterCircleRadiusProgress(0);
        vDotsView.setCurrentProgress(0);

        animatorSet = new AnimatorSet();

        ObjectAnimator outerCircleAnimator = ObjectAnimator.ofFloat
                (vCircleView, "outerCircleRadiusProgress", 0f, 1f);
        outerCircleAnimator.setDuration(550);
        outerCircleAnimator.setStartDelay(0);
        outerCircleAnimator.setInterpolator(DECCELERATE_INTERPOLATOR);
        //目标属性的属性名、初始值或结束值
        ObjectAnimator innerCircleAnimator = ObjectAnimator.ofFloat(vCircleView, "innerCircleRadiusProgress", 0f, 1f);
        innerCircleAnimator.setDuration(650);
        innerCircleAnimator.setStartDelay(0);
        innerCircleAnimator.setInterpolator(DECCELERATE_INTERPOLATOR);

        ObjectAnimator starScaleYAnimator = ObjectAnimator.ofFloat(ivLike, ImageView.SCALE_Y, 0.2f, 1f);
        starScaleYAnimator.setDuration(550);
        starScaleYAnimator.setStartDelay(0);
        starScaleYAnimator.setInterpolator(OVERSHOOT_INTERPOLATOR);

        ObjectAnimator starScaleXAnimator = ObjectAnimator.ofFloat(ivLike, ImageView.SCALE_X, 0.2f, 1f);
        starScaleXAnimator.setDuration(550);
        starScaleXAnimator.setStartDelay(0);
        starScaleXAnimator.setInterpolator(OVERSHOOT_INTERPOLATOR);

        ObjectAnimator dotsAnimator = ObjectAnimator.ofFloat(vDotsView, "currentProgress", 0, 1f);
        dotsAnimator.setDuration(850);
        dotsAnimator.setStartDelay(100);
        dotsAnimator.setInterpolator(ACCELERATE_DECELERATE_INTERPOLATOR);

        animatorSet.playTogether(
                outerCircleAnimator,
                innerCircleAnimator,
                starScaleYAnimator,
                starScaleXAnimator,
                dotsAnimator
        );

        animatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                ivLike.setEnabled(true);
            }
        });


        animatorSet.start();
    }
}

【最后】

得到LikeAnimationView，这里暴露一个start的方法，在需要的地方调用即可。