先看效果

看起來復(fù)雜牍颈，但是我們可以分步實現(xiàn)茵臭，最后你會發(fā)現(xiàn)很簡單迁杨。

【第一步】：畫圓---不斷放大的空心圓 -- CircleView

想要的效果是不斷擴(kuò)大的空心圓诗眨。
關(guān)于這點我們可以有多種思路:
1.畫一個空心圓然后根據(jù)半徑不斷增大從而達(dá)到效果
2.畫兩個圓唉匾，外圓實心，內(nèi)圓清除匠楚，從而給人一種這樣的效果
實驗了一下巍膘，第二種效果更好一點。
代碼如下芋簿，很簡單峡懈。

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);
        //內(nèi)圓圖像混合模式之清除圖像
        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);
        //畫內(nèi)圓
        tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, innerCircleRadiusProgress * maxCircleSize, innerPaint);
        canvas.drawBitmap(tempBitmap, 0, 0, null);
    }
    //對外暴露的屬性，設(shè)置進(jìn)度与斤，讓圓心動態(tài)變化肪康。
    public void setInnerCircleRadiusProgress(float innerCircleRadiusProgress) {
        this.innerCircleRadiusProgress = innerCircleRadiusProgress;
        postInvalidate();
    }

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

【第二步】：畫四周點的視圖--DotsView

本質(zhì)還是畫圓荚恶，只不過重要的是確定各個圓的圓心位置

    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 {
    //粒子個數(shù)
    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);
        //目標(biāo)屬性的屬性名、初始值或結(jié)束值
        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的方法谒撼，在需要的地方調(diào)用即可。