Android -- 《 最美有物》好看的點贊效果

1，前天在鴻洋的公衆號上看到一款不錯的點贊效果，是仿最美有物的點贊，再加上本身最近學習狀態不好，本身想着經過這個效果練手一下，果真，花了整整兩天的時間，按照之前的效率的話一天就夠了，哎，已經調整了一個多月了，但願本身狀態早點找回來吧，早點給你們多寫寫博客。

2，回到正題上來，今天咱們實現的效果以下：

　　其實上面的效果很簡單，都是使用動畫效果，基本上能夠拆分爲三部分，兩個圓拉昇變長變成一個四邊圓角的矩形-->播放幀動畫點頭或者搖頭的效果--->動畫回收效果

① 、動畫兩個圓拉昇變長變成一個四邊圓角的矩形效果

     按照咱們上面解析的三個步驟，咱們首先是要實現拉伸變長效果，要實現的效果以下：

 　　當時本身寫這個效果的時候也是先在這個地方猶豫了一下，咱們知道上面的效果首先是由圓變成帶圓角的矩形，因此這裏我開始想到的實現效果是首先建立一個圓角很大的shape文件，分別顏色值分別是白色和黃色。而後設置一個喜歡和不喜歡的view每個實際上是一個ImageView 而後設置gravity設置爲top，使用咱們剛建立的shape文件爲背景，使用笑臉當作src的文件，而後使用屬性動畫不停的增大ImageView的paddingBottom屬性，這樣就能夠把咱們的佈局不斷的撐大，從而實現這個階段的效果。

　　既然咱們有了這樣的思路開擼開擼，可是現實很悲催ImageView 沒有gravity屬性，不過沒事，咱們可使用一個Relatation或者LinearLayout包裹ImageView不斷地設置Relatation或者LinearLayout的paddingBottom屬性就能夠解決，我以後去看了一下原做者的思路和個人很想，不過他是設置裏面的ImageView的MarginBottom的邊距。

　　這裏咱們是自定義view，分析了一下咱們仍是繼承LinearLayout，主要的大界面分爲三部分左邊不喜歡的view、右邊喜歡的view、中間的短分割線，以下圖：

　　當動畫開始的時候，上面顯示「60%」 「無感」等字樣的，這裏咱們每個喜歡或不喜歡的view其實都也仍是一個LinearLayout，裏面包含三個部分：兩個頭部的TextView還有下面的咱們上面分析過的拉長的矩形

 

 因此這裏咱們先建立LikeSmileView.java 繼承LinearLayout

public class LikeSmileView extends LinearLayout {
    private static String TAG = "LikeSmileView" ;
    private Context mContext ;

    private int dividerMargin ;

    //喜歡和不喜歡的圖標
    private ImageView mImageViewLike ;
    private ImageView mImageViewDisLike ;
    private TextView mTextViewLike ;
    private TextView mTextViewDisLike ;
    private TextView mTextViewLikeCharacter;
    private TextView mTextViewDisLikeCharacter;
    private LinearLayout mLinearLikeBg ;
    private LinearLayout mLinearDisLikeBg ;
    private LinearLayout mLinearAlllike ;
    private LinearLayout mLinearAllDisLike ;

    //喜歡和不喜歡的文字
    private String defaultLikeString  ;
    private String defaultDisLikeString ;

    //動畫出來時候的背景顏色
    private int shadowColor ;

    //設置默認的點贊數和差評數
    private int likeCount = 10 ;
    private int dislikeCount = 20 ;
    //喜歡和不喜歡所佔比例
    private float fLikePercentage;
    private float fDisLikePercentage;

    //幀動畫
    private AnimationDrawable likeFrameAnimation ;
    private AnimationDrawable disLikeFrameAnimation ;


    //默認文字的顏色
    private int defaultTextColor ;
    //默認文字的大小
    private float defaultTextSize ;

    //默認圖片背景的大小
    private int defaultBackGroundSize ;

    //擴展動畫
    private ValueAnimator mAnimatorScrollLarge ;

    //收回動畫
    private ValueAnimator mAnimatorBack;

    //執行動畫分類
    private int type ;

    //記錄動畫是否完成
    private boolean isClosed ;

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

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

    public LikeSmileView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context ;
        init();
    }
}

　　而後再init()方法裏面來初始化一些基本數值、初始化一些控件，而後建立view添加到主佈局裏面去，代碼以下：

private void init() {
        //設置LinearLayout的一些屬性
        setOrientation(HORIZONTAL);
        setGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM);
        setBackgroundColor(Color.TRANSPARENT);

        //初始化一些數據值
        defaultLikeString = getResources().getString(like);
        defaultDisLikeString = getResources().getString(R.string.dislike);
        shadowColor = getResources().getColor(R.color.shadow);
        defaultTextColor =getResources().getColor(R.color.white);
        defaultTextSize = getResources().getDimension(R.dimen.dimen_16);
        defaultBackGroundSize = (int)getResources().getDimension(R.dimen.dimen_25);

        dividerMargin = 30 ;

        //計算動畫開始高度的百分比
        float sunCount = likeCount+dislikeCount;
        fLikePercentage = likeCount / sunCount;
        fDisLikePercentage = dislikeCount /sunCount ;

        //初始化圖片
        mImageViewLike = new ImageView(mContext);
        mImageViewLike.setBackgroundResource(R.drawable.animation_like);
        likeFrameAnimation = (AnimationDrawable) mImageViewLike.getBackground();

        mImageViewDisLike = new ImageView(mContext);
        mImageViewDisLike.setBackgroundResource(R.drawable.animation_dislike);
        disLikeFrameAnimation = (AnimationDrawable) mImageViewDisLike.getBackground();

        //初始化文字
        mTextViewLike = new TextView(mContext);
        mTextViewLike.setText((int)(fLikePercentage * 100)+"%");
        mTextViewLike.setTextColor(defaultTextColor);

        mTextViewLikeCharacter = new TextView(getContext());
        mTextViewLikeCharacter.setText(defaultLikeString);
        mTextViewLikeCharacter.setTextColor(defaultTextColor);

        mTextViewDisLike = new TextView(mContext);
        mTextViewDisLike.setText((int)(fDisLikePercentage * 100)+"%");
        mTextViewDisLike.setTextColor(defaultTextColor);


        mTextViewDisLikeCharacter = new TextView(getContext());
        mTextViewDisLikeCharacter.setText(defaultDisLikeString);
        mTextViewDisLikeCharacter.setTextColor(defaultTextColor);

        //初始化背景view
        mLinearLikeBg = new LinearLayout(mContext);
        LayoutParams params = new LayoutParams(defaultBackGroundSize, defaultBackGroundSize);
        mLinearLikeBg.addView(mImageViewLike,params);
        mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);

        mLinearDisLikeBg = new LinearLayout(mContext);
        mLinearDisLikeBg.addView(mImageViewDisLike,params);
        mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_white);

        //初始化單個喜歡/不喜歡的view
        mLinearAlllike = new LinearLayout(mContext);
        mLinearAlllike.setOrientation(VERTICAL);
        mLinearAlllike.setGravity(Gravity.CENTER_HORIZONTAL);
        mLinearAlllike.setBackgroundColor(Color.TRANSPARENT);

        mLinearAllDisLike = new LinearLayout(mContext);
        mLinearAllDisLike.setOrientation(VERTICAL);
        mLinearAllDisLike.setGravity(Gravity.CENTER_HORIZONTAL);
        mLinearAllDisLike.setBackgroundColor(Color.TRANSPARENT);

        //將文字放入LinearLayout中
        LayoutParams paramsAll = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        paramsAll.setMargins(0, 10, 0, 0);
        paramsAll.gravity = Gravity.CENTER;

        mLinearAlllike.addView(mTextViewLike,paramsAll);
        mLinearAlllike.addView(mTextViewLikeCharacter,paramsAll);
        mLinearAlllike.addView(mLinearLikeBg,paramsAll);

        mLinearAllDisLike.addView(mTextViewDisLike,paramsAll);
        mLinearAllDisLike.addView(mTextViewDisLikeCharacter,paramsAll);
        mLinearAllDisLike.addView(mLinearDisLikeBg,paramsAll);

        //添加中間的分割線
        ImageView imageView = new ImageView(getContext());
        imageView.setBackground(new ColorDrawable(Color.GRAY));
        LayoutParams params4 = new LayoutParams(3, 60);
        params4.setMargins(dividerMargin, 10, dividerMargin, 40);
        params4.gravity = Gravity.BOTTOM;


        LayoutParams params3 = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params3.setMargins(30, 20, 30, 20);
        params3.gravity = Gravity.BOTTOM;

        //添加到總的佈局
        addView(mLinearAllDisLike,params3);
        addView(imageView,params4);
        addView(mLinearAlllike,params3);

        setVisibities(GONE);
}

　　有了上面的代碼咱們能夠運行一下，能夠實現咱們基本的視圖效果了，以下：

     這時候到了咱們最關鍵的一步了，就是監聽用戶點擊喜歡和不喜歡兩個ImageView的事件，從而觸發咱們的動畫效果，大體代碼以下：

//添加監聽
        mImageViewLike.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                type = 1 ;
                //首先拉伸背景
                animScrollLarge();
                //展現文字
                setVisibities(VISIBLE);
                //改變被選擇的背景
                mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);
                mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_white);
                //改變整個view的背景顏色
                setBackgroundColor(shadowColor);
            }
        });

        mImageViewDisLike.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                type = 2 ;
                //首先拉伸背景
                animScrollLarge();
                //展現文字
                setVisibities(VISIBLE);
                //改變被選擇的背景
                mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_white);
                mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);
                //改變整個view的背景顏色
                setBackgroundColor(shadowColor);
            }
        });

　　這裏用過type來記錄用戶點擊的是喜歡和不喜歡，而後就是點擊以後一些靜態的視圖上面的改變，到了咱們第一個關鍵的方法animScrollLarge()是實現佈局拉長的具體實現方法，這裏臥室使用屬性動畫來實現了，讓imageview的marginBottom屬性在5px-300px之間改變，這裏的數值你們能夠根據本身的實際狀況來改變，代碼以下：

private void animScrollLarge() {
        //在動畫執行的時候不予許點擊
        mImageViewDisLike.setClickable(false);
        mImageViewLike.setClickable(false);

        isClosed = false ;

        //計算二者比例的最大值
        int max =  Math.max(likeCount * 15 ,dislikeCount *15) ;
        mAnimatorScrollLarge = ValueAnimator.ofInt(5,max);
        mAnimatorScrollLarge.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int margin = (int) valueAnimator.getAnimatedValue();
                LayoutParams paramsLike
                        = (LayoutParams) mImageViewLike.getLayoutParams();
                paramsLike.bottomMargin = margin;

                if (margin <= likeCount * 15) {
                    mImageViewLike.setLayoutParams(paramsLike);
                }
                if (margin <= dislikeCount * 15) {
                    mImageViewDisLike.setLayoutParams(paramsLike);
                }
            }
        });

        mAnimatorScrollLarge.setDuration(500);
        mAnimatorScrollLarge.start();
    }

　　ok，這樣咱們第一階段的效果就實現了，來看看實現的效果：

② 播放幀動畫點頭或者搖頭的效果

　　先看一下咱們要實現的效果

 

    這裏主要是一個幀動畫的播放，可是，若是隻播放幀動畫的的話就只有如下效果：

     能夠看到，若是隻播放幀動畫的話，就沒有點頭的二維效果，因此在播放幀動畫的同時咱們要繼續加上一個上下小範圍的移動動畫，從而實現那種立體的點頭效果，代碼以下：

private void changeY(View view){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view,"translationY",-10.0f,0f,10.0f,0f,-10f,0f,10.0f,0f);
        animator.setRepeatMode(ObjectAnimator.RESTART);//重複模式
        animator.setDuration(1500);
        animator.start();
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {

            }

        });
    }

　　同理，當點擊不喜歡的時候，咱們的幀動畫也沒有那種立體的效果，而咱們日常在表示不一樣意的時候是搖頭，因此不一樣於咱們上面的代碼咱們這裏是左右小範圍的移動動畫

private void changeX(View view ){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view,"translationX",-10.0f,0f,10.0f,0f,-10f,0f,10.0f,0f);
        animator.setRepeatMode(ObjectAnimator.RESTART);//重複模式
        animator.setDuration(1500);
        animator.start();
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
            }

        });
    }

　　ok，這樣咱們的點頭搖頭效果就實現了，很簡單有沒有，就是兩個簡單的動畫

③、動畫回收效果

　　這個效果很簡單，就是動畫回收的效果，和咱們步驟一的動畫效果很想，咱們步驟一的效果是撐大，而這個是縮小，因此只須要把ImageView的marginBottom的值由350px變成5px就行

private void setBackAnim() {
        isClosed = true ;

        //計算二者比例的最大值
        int max =  Math.max(likeCount * 15 ,dislikeCount *15) ;
        mAnimatorBack = ValueAnimator.ofInt(max,5);
        mAnimatorBack.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int margin = (int) valueAnimator.getAnimatedValue();
                LayoutParams paramsLike
                        = (LayoutParams) mImageViewLike.getLayoutParams();
                paramsLike.bottomMargin = margin;

                if (margin <= likeCount * 15) {
                    mImageViewLike.setLayoutParams(paramsLike);
                }
                if (margin <= dislikeCount * 15) {
                    mImageViewDisLike.setLayoutParams(paramsLike);
                }
            }
        });

        mAnimatorBack.addListener(this);
        mAnimatorBack.setDuration(500);
        mAnimatorBack.start();
    }

　　再監聽這個動畫的完成，當回縮動畫完成時候，將上面的文字消失，背景設置成透明，imageview圖片設置成初始圖片操做

//文字消失
            setVisibities(GONE);
            //恢復透明
            setBackgroundColor(Color.TRANSPARENT);
            //播放完成以後恢復到原始圖片
            if (type == 1){
                mImageViewLike.setBackground(null);
                mImageViewLike.setBackgroundResource(R.drawable.animation_like);
                likeFrameAnimation = (AnimationDrawable) mImageViewLike.getBackground();
            }else {
                mImageViewDisLike.setBackground(null);
                mImageViewDisLike.setBackgroundResource(R.drawable.animation_dislike);
                disLikeFrameAnimation = (AnimationDrawable) mImageViewDisLike.getBackground();
            }

　　ok，到這裏咱們的效果基本上都實現了，這裏貼一下LikeSmileView的整個代碼

package com.ysten.likesmilebar;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.ColorDrawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import static com.ysten.likesmilebar.R.string.like;

/**
 * author : wangjitao
 * e-mail : 543441727@qq.com
 * time   : 2017/08/10
 * desc   :
 * version: 1.0
 */
public class LikeSmileView extends LinearLayout implements Animator.AnimatorListener{
    private static String TAG = "LikeSmileView" ;
    private Context mContext ;

    private int dividerMargin ;

    //喜歡和不喜歡的圖標
    private ImageView mImageViewLike ;
    private ImageView mImageViewDisLike ;
    private TextView mTextViewLike ;
    private TextView mTextViewDisLike ;
    private TextView mTextViewLikeCharacter;
    private TextView mTextViewDisLikeCharacter;
    private LinearLayout mLinearLikeBg ;
    private LinearLayout mLinearDisLikeBg ;
    private LinearLayout mLinearAlllike ;
    private LinearLayout mLinearAllDisLike ;

    //喜歡和不喜歡的文字
    private String defaultLikeString  ;
    private String defaultDisLikeString ;

    //動畫出來時候的背景顏色
    private int shadowColor ;

    //設置默認的點贊數和差評數
    private int likeCount = 10 ;
    private int dislikeCount = 20 ;
    //喜歡和不喜歡所佔比例
    private float fLikePercentage;
    private float fDisLikePercentage;

    //幀動畫
    private AnimationDrawable likeFrameAnimation ;
    private AnimationDrawable disLikeFrameAnimation ;


    //默認文字的顏色
    private int defaultTextColor ;
    //默認文字的大小
    private float defaultTextSize ;

    //默認圖片背景的大小
    private int defaultBackGroundSize ;

    //擴展動畫
    private ValueAnimator mAnimatorScrollLarge ;

    //收回動畫
    private ValueAnimator mAnimatorBack;

    //執行動畫分類
    private int type ;

    //記錄動畫是否完成
    private boolean isClosed ;

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

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

    public LikeSmileView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context ;
        init();
    }

    private void init() {
        //設置LinearLayout的一些屬性
        setOrientation(HORIZONTAL);
        setGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM);
        setBackgroundColor(Color.TRANSPARENT);

        //初始化一些數據值
        defaultLikeString = getResources().getString(like);
        defaultDisLikeString = getResources().getString(R.string.dislike);
        shadowColor = getResources().getColor(R.color.shadow);
        defaultTextColor =getResources().getColor(R.color.white);
        defaultTextSize = getResources().getDimension(R.dimen.dimen_16);
        defaultBackGroundSize = (int)getResources().getDimension(R.dimen.dimen_25);

        dividerMargin = 30 ;

        //計算動畫開始高度的百分比
        float sunCount = likeCount+dislikeCount;
        fLikePercentage = likeCount / sunCount;
        fDisLikePercentage = dislikeCount /sunCount ;

        //初始化圖片
        mImageViewLike = new ImageView(mContext);
        mImageViewLike.setBackgroundResource(R.drawable.animation_like);
        likeFrameAnimation = (AnimationDrawable) mImageViewLike.getBackground();

        mImageViewDisLike = new ImageView(mContext);
        mImageViewDisLike.setBackgroundResource(R.drawable.animation_dislike);
        disLikeFrameAnimation = (AnimationDrawable) mImageViewDisLike.getBackground();

        //初始化文字
        mTextViewLike = new TextView(mContext);
        mTextViewLike.setText((int)(fLikePercentage * 100)+"%");
        mTextViewLike.setTextColor(defaultTextColor);

        mTextViewLikeCharacter = new TextView(getContext());
        mTextViewLikeCharacter.setText(defaultLikeString);
        mTextViewLikeCharacter.setTextColor(defaultTextColor);

        mTextViewDisLike = new TextView(mContext);
        mTextViewDisLike.setText((int)(fDisLikePercentage * 100)+"%");
        mTextViewDisLike.setTextColor(defaultTextColor);


        mTextViewDisLikeCharacter = new TextView(getContext());
        mTextViewDisLikeCharacter.setText(defaultDisLikeString);
        mTextViewDisLikeCharacter.setTextColor(defaultTextColor);

        //初始化背景view
        mLinearLikeBg = new LinearLayout(mContext);
        LayoutParams params = new LayoutParams(defaultBackGroundSize, defaultBackGroundSize);
        mLinearLikeBg.addView(mImageViewLike,params);
        mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);

        mLinearDisLikeBg = new LinearLayout(mContext);
        mLinearDisLikeBg.addView(mImageViewDisLike,params);
        mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_white);

        //初始化單個喜歡/不喜歡的view
        mLinearAlllike = new LinearLayout(mContext);
        mLinearAlllike.setOrientation(VERTICAL);
        mLinearAlllike.setGravity(Gravity.CENTER_HORIZONTAL);
        mLinearAlllike.setBackgroundColor(Color.TRANSPARENT);

        mLinearAllDisLike = new LinearLayout(mContext);
        mLinearAllDisLike.setOrientation(VERTICAL);
        mLinearAllDisLike.setGravity(Gravity.CENTER_HORIZONTAL);
        mLinearAllDisLike.setBackgroundColor(Color.TRANSPARENT);

        //將文字放入LinearLayout中
        LayoutParams paramsAll = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        paramsAll.setMargins(0, 10, 0, 0);
        paramsAll.gravity = Gravity.CENTER;

        mLinearAlllike.addView(mTextViewLike,paramsAll);
        mLinearAlllike.addView(mTextViewLikeCharacter,paramsAll);
        mLinearAlllike.addView(mLinearLikeBg,paramsAll);

        mLinearAllDisLike.addView(mTextViewDisLike,paramsAll);
        mLinearAllDisLike.addView(mTextViewDisLikeCharacter,paramsAll);
        mLinearAllDisLike.addView(mLinearDisLikeBg,paramsAll);

        //添加中間的分割線
        ImageView imageView = new ImageView(getContext());
        imageView.setBackground(new ColorDrawable(Color.GRAY));
        LayoutParams params4 = new LayoutParams(3, 60);
        params4.setMargins(dividerMargin, 10, dividerMargin, 40);
        params4.gravity = Gravity.BOTTOM;


        LayoutParams params3 = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params3.setMargins(30, 20, 30, 20);
        params3.gravity = Gravity.BOTTOM;

        //添加到總的佈局
        addView(mLinearAllDisLike,params3);
        addView(imageView,params4);
        addView(mLinearAlllike,params3);

        setVisibities(GONE);

        //添加監聽
        mImageViewLike.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                type = 1 ;
                //首先拉伸背景
                animScrollLarge();
                //展現文字
                setVisibities(VISIBLE);
                //改變被選擇的背景
                mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);
                mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_white);
                //改變整個view的背景顏色
                setBackgroundColor(shadowColor);
            }
        });

        mImageViewDisLike.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                type = 2 ;
                //首先拉伸背景
                animScrollLarge();
                //展現文字
                setVisibities(VISIBLE);
                //改變被選擇的背景
                mLinearLikeBg.setBackgroundResource(R.drawable.ic_select_white);
                mLinearDisLikeBg.setBackgroundResource(R.drawable.ic_select_yellow);
                //改變整個view的背景顏色
                setBackgroundColor(shadowColor);
            }
        });

        //設置初始化界面
    }

    private void animScrollLarge() {
        //在動畫執行的時候不予許點擊
        mImageViewDisLike.setClickable(false);
        mImageViewLike.setClickable(false);

        isClosed = false ;

        //計算二者比例的最大值
        int max =  Math.max(likeCount * 15 ,dislikeCount *15) ;
        mAnimatorScrollLarge = ValueAnimator.ofInt(5,max);
        mAnimatorScrollLarge.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int margin = (int) valueAnimator.getAnimatedValue();
                LayoutParams paramsLike
                        = (LayoutParams) mImageViewLike.getLayoutParams();
                paramsLike.bottomMargin = margin;

                if (margin <= likeCount * 15) {
                    mImageViewLike.setLayoutParams(paramsLike);
                }
                if (margin <= dislikeCount * 15) {
                    mImageViewDisLike.setLayoutParams(paramsLike);
                }
            }
        });

        mAnimatorScrollLarge.addListener(this);
        mAnimatorScrollLarge.setDuration(500);
        mAnimatorScrollLarge.start();

    }

    private void setVisibities(int mode){
        mTextViewDisLikeCharacter.setVisibility(mode);
        mTextViewDisLike.setVisibility(mode);
        mTextViewLike.setVisibility(mode);
        mTextViewLikeCharacter.setVisibility(mode);
    }


    @Override
    public void onAnimationStart(Animator animator) {

    }

    @Override
    public void onAnimationEnd(Animator animator) {
        //重置幀動畫
        likeFrameAnimation.stop();
        disLikeFrameAnimation.stop();

        //收回後可點擊
        if (isClosed){
            mImageViewLike.setClickable(true);
            mImageViewDisLike.setClickable(true);
            //文字消失
            setVisibities(GONE);
            //恢復透明
            setBackgroundColor(Color.TRANSPARENT);
            //播放完成以後恢復到原始圖片
            if (type == 1){
                mImageViewLike.setBackground(null);
                mImageViewLike.setBackgroundResource(R.drawable.animation_like);
                likeFrameAnimation = (AnimationDrawable) mImageViewLike.getBackground();
            }else {
                mImageViewDisLike.setBackground(null);
                mImageViewDisLike.setBackgroundResource(R.drawable.animation_dislike);
                disLikeFrameAnimation = (AnimationDrawable) mImageViewDisLike.getBackground();
            }

            return;
        }

        //根據type判斷執行的是哪一個動畫
        if(type ==1 ){
            //開始幀動畫
            likeFrameAnimation.start();
            //開始點頭動畫
            changeY(mImageViewLike);

        }else {
            //開始幀動畫
            disLikeFrameAnimation.start();
            //開始搖頭動畫
            changeX(mImageViewDisLike);
        }
    }

    private void changeY(View view){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view,"translationY",-10.0f,0f,10.0f,0f,-10f,0f,10.0f,0f);
        animator.setRepeatMode(ObjectAnimator.RESTART);//重複模式
        animator.setDuration(1500);
        animator.start();
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
                setBackAnim();//執行回彈動畫
            }

        });
    }

    private void changeX(View view ){
        ObjectAnimator animator = ObjectAnimator.ofFloat(view,"translationX",-10.0f,0f,10.0f,0f,-10f,0f,10.0f,0f);
        animator.setRepeatMode(ObjectAnimator.RESTART);//重複模式
        animator.setDuration(1500);
        animator.start();
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animator) {
                setBackAnim();//執行回彈動畫
            }

        });
    }



    @Override
    public void onAnimationCancel(Animator animator) {

    }

    @Override
    public void onAnimationRepeat(Animator animator) {

    }

    private void setBackAnim() {
        isClosed = true ;

        //計算二者比例的最大值
        int max =  Math.max(likeCount * 15 ,dislikeCount *15) ;
        mAnimatorBack = ValueAnimator.ofInt(max,5);
        mAnimatorBack.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int margin = (int) valueAnimator.getAnimatedValue();
                LayoutParams paramsLike
                        = (LayoutParams) mImageViewLike.getLayoutParams();
                paramsLike.bottomMargin = margin;

                if (margin <= likeCount * 15) {
                    mImageViewLike.setLayoutParams(paramsLike);
                }
                if (margin <= dislikeCount * 15) {
                    mImageViewDisLike.setLayoutParams(paramsLike);
                }
            }
        });

        mAnimatorBack.addListener(this);
        mAnimatorBack.setDuration(500);
        mAnimatorBack.start();
    }
}

　　最後實現的效果以下：