实现炫酷的点赞动画

先上图

实现炫酷的点赞动画_第1张图片





    

    


其实就是一个ImageView设置笑脸  把shape背景给LinearLayout, 然后valueAnimator调整下方view的下边距把笑脸顶上去

看代码

package com.example.fanday.ipc;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

/**
 * Created by fanday on 2017/8/9.
 */

public class LikeView extends FrameLayout implements View.OnClickListener {
    public LikeView(Context context) {
        this(context,null,0);
    }

    public LikeView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public LikeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    View bottomView;
    ImageView like;
    private void init() {
        View view = View.inflate(getContext(), R.layout.like_layout, null);
        this.addView(view);
        bottomView = view.findViewById(R.id.bottomView);
        like = (ImageView) view.findViewById(R.id.like);
        like.setOnClickListener(this);
    }


    @Override
    public void onClick(View v) {
        final MarginLayoutParams lp = (MarginLayoutParams) bottomView.getLayoutParams();
        final ValueAnimator va = ValueAnimator.ofInt(0,100);
        va.setDuration(1000);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                lp.bottomMargin = value;
                bottomView.requestLayout();
                if(value == 100)
                    go2Like();
            }
        });
        va.start();
    }

    private void go2Like() {
            like.setBackgroundResource(R.drawable.likeanim);
            final AnimationDrawable anim = (AnimationDrawable) like.getBackground();
            anim.start();
            like.postDelayed(new Runnable() {
                @Override
                public void run() {
                    MarginLayoutParams lp = (MarginLayoutParams) bottomView.getLayoutParams();
                    lp.bottomMargin = 0;
                    bottomView.requestLayout();
                    anim.stop();
                }
            },650);
    }
}

在动画结束后,播放帧动画让笑脸笑起来,然后把底部view下边距设置回0,就ok了

shape文件



    
    

帧动画的图片可以找类似的就行  主要为了达到效果



你可能感兴趣的:(自定义View)