android+微博点赞动画,模仿微博点赞动画

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

效果图：

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

ezgif-1-fdcd65cd45.gif

动画思路：

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

2、背景圆圈

3、烟花效果

先看一下布局

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/bg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"/>

android:id="@+id/fireworks"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:visibility="invisible"/>

android:id="@+id/circle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"/>

android:id="@+id/icon"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="40dp"

/>

大拇指动画

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

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哦！