模仿微博点赞动画

在刷微博的时候，发现微博最近版本更新了一个点赞的动画，最近项目不是太忙，就模仿实现一下。

效果图：

gif看起来卡顿，不流畅，真机运行起来效果会好很多

ezgif-1-fdcd65cd45.gif

动画思路：

1、大拇指的旋转、位移、缩放变换

2、背景圆圈

3、烟花效果

先看一下布局

大拇指动画

点赞过程中，大拇指的上顶、抖动效果，用属性动画的位移、缩放、旋转实现。这个大拇指的图片我用了矢量图，这里有一个在线转换SVG网址：https://www.vectorizer.io/

   ObjectAnimator starScaleYAnimator = ObjectAnimator.ofFloat(icon, ImageView.SCALE_Y, 1.0f, 2f, 1.0f);
   starScaleYAnimator.setDuration(500);

   ObjectAnimator starScaleXAnimator = ObjectAnimator.ofFloat(icon, ImageView.SCALE_X, 1.0f, 2f, 1.0f);
   starScaleXAnimator.setDuration(500);

   ObjectAnimator translationYAnimator = ObjectAnimator.ofFloat(icon, "translationY", 0, -20, 0);
   translationYAnimator.setDuration(500);

   ObjectAnimator rotateAnimator = ObjectAnimator.ofFloat(icon, "rotation", 0, 10, 0, -10, 0);
   rotateAnimator.setDuration(500);

背景圆圈动画

背景圆圈很简单，就是用PorterDuff.Mode.CLEAR模式画了一个同心圆。然后用Property包装一个属性，进行属性动画

  @Override
  protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       tempCanvas.drawColor(0xffffff, PorterDuff.Mode.CLEAR);
       tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadiusProgress * maxCircleSize, circlePaint);
       tempCanvas.drawCircle(getWidth() / 2, getHeight() / 2, circleRadiusProgress * maxCircleSize/3, maskPaint);
       canvas.drawBitmap(tempBitmap, 0, 0, null);
    }

  public static final Property CIRCLE_RADIUS_PROGRESS =
       new Property(Float.class, "circleRadiusProgress") {
              @Override
              public Float get(CircleView object) {
                  return object.getCircleRadiusProgress();
              }

              @Override
              public void set(CircleView object, Float value) {
                  object.setCircleRadiusProgress(value);
              }
        };

 ObjectAnimator roundAnimator = ObjectAnimator.ofFloat(circleView,CircleView.CIRCLE_RADIUS_PROGRESS, 0f, 1f);
 roundAnimator.setDuration(250);
 //等大拇指变到最大，顶到最高，开始背景圆圈动画
 rotateAnimator.setStartDelay(250);

烟花动画

烟花效果，以270为中心画五条线，进行长短变换。也是一样，用Property包装一个属性，进行属性动画

  private static final int LINES_COUNT = 5;
  //每条线的间隔角度
  private static final int LINES_POSITION_ANGLE = 51;

  //给0.1的起始长度
  private void updateLinesPosition() {
       this.startRadius = (0.2f + 0.8f * currentProgress) * maxFireworkRadius;
       this.endRadius = (0.3f + 0.7f * currentProgress) * maxFireworkRadius;
  }

   @Override
   protected void onDraw(Canvas canvas) {
        for (int i = 0; i < LINES_COUNT; i++) {
            int start_X = (int) (centerX + startRadius * Math.cos(((2-i) * LINES_POSITION_ANGLE + 270) * Math.PI / 180));
            int start_Y = (int) (centerY + startRadius * Math.sin(((2-i) * LINES_POSITION_ANGLE + 270) * Math.PI / 180));
            int end_X = (int) (centerX + endRadius * Math.cos(((2-i) * LINES_POSITION_ANGLE + 270) * Math.PI / 180));
            int end_Y = (int) (centerY + endRadius * Math.sin(((2-i) * LINES_POSITION_ANGLE + 270) * Math.PI / 180));
            canvas.drawLine(start_X, start_Y, end_X, end_Y, fireworkPaint);
        }
   }

   public static final Property FIREWORK_PROGRESS = new Property(Float.class, "fireworkProgress") {
        @Override
        public Float get(FireworkView object) {
            return object.getCurrentProgress();
        }

        @Override
        public void set(FireworkView object, Float value) {
            object.setCurrentProgress(value);
        }
    };

   ObjectAnimator fireworkAnimator = ObjectAnimator.ofFloat(firewokView, FireworkView.FIREWORK_PROGRESS, 0, 1f);
   fireworkAnimator.setDuration(250);
   //等大拇指变到最大，顶到最高，开始烟花动画
   rotateAnimator.setStartDelay(250);

完整源码：

完整源码在GitHub
喜欢的话，记得star哦！