自定义view实现《最美有物》点赞效果

最近在博客中发现了一篇关于最美有物app上的点赞效果实现于是自己也做了一个demo最美有物效果图如下

在这里其实有两个动画一个是不断上升的动画然后是小人笑脸或者无感的动画逐渐上升的动画使用属性动画逐渐改变view的margin或者padding即可笑脸或者无感的动画使用逐帧动画即可。

布局代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_iv_bg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/shap_round_yellow"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_yellow_smail"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/app_name"
        android:src="@drawable/animation_like" />
</LinearLayout>

然后是自定义布局代码的处理

public class DianZanView extends LinearLayout {
    LinearLayout llBg;
    ImageView ivSmail;

    public DianZanView(Context context) {
        this(context, null);
    }

    public DianZanView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DianZanView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        LayoutInflater.from(context).inflate(R.layout.item_dianzan, this);
        llBg = findViewById(R.id.ll_iv_bg);
        ivSmail = findViewById(R.id.iv_yellow_smail);
    }

    public void startAnimUp() {
        ValueAnimator upAnim = ValueAnimator.ofFloat(0, 300).setDuration(3000);
        upAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                LinearLayout.LayoutParams layoutParams = (LayoutParams) ivSmail.getLayoutParams();
                float bottomMargin = (float) animation.getAnimatedValue();
                layoutParams.setMargins(0, 0, 0, (int) bottomMargin);
                ivSmail.setLayoutParams(layoutParams);
                if (bottomMargin == 300) {
                    AnimationDrawable animationDrawable = (AnimationDrawable) ivSmail.getDrawable();
                    animationDrawable.stop();
                    animationDrawable.start();
                }
            }
        });
        upAnim.start();
    }

    public void startAnimDown() {

    }

}

代码只实现了一部分剩下的加一些处理逻辑即可
参考

自定义控件 | 仿《最美有物》点赞效果
资源地址
点赞效果代码