先看效果
看起来复杂，但是我们可以分步实现，最后你会发现很简单。
【第一步】：画圆---不断放大的空心圆 -- 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
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的方法，在需要的地方调用即可。