高仿支付宝咻一咻功能

高仿支付宝咻一咻功能，全部使用属性动画完成

效果如下：

实现方法分析：

1.按钮的动画：按钮的点击监听使用onTouchListener，监听action_down和action_up两个事件，按下时缩小按钮，放开时先放大再缩小到原来的大小。

2.循环缩放的外圈：外圈首先使用Imageview显示在xml布局中，然后通过属性动画设置无限循环的缩放，当用户发生按钮点击时，隐藏外圈并且发散波纹，用户停止点击后3秒（使用handler发送延时消息，显示外圈，并且继续执行无限循环的缩放动画）。

3.扩散波纹：通过add动态生成的Imageview到frameLayout中，然后对imageview设置透明度和方法的动画，实现了波纹的扩散，在动画结束时，remove掉frameLaout中添加进去的Imageview。

以下为实现代码

自定义控件的代码：

public class XiuView extends FrameLayout {

    /**
     * 按钮
     */
    private ImageView iv_btn;

    /**
     * 循环外圈
     */
    private ImageView iv_out_circle;

    /**
     * 装波纹的容器
     */
    private FrameLayout fl_move_circle;

    /**
     * 按钮点击监听
     */
    private OnBtnPressListener onBtnPressListener;

    public void setOnBtnPressListener(OnBtnPressListener onBtnPressListener) {
        this.onBtnPressListener = onBtnPressListener;
    }

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            iv_out_circle.setVisibility(VISIBLE);
            startOutCircleAnim();
        }
    };

    public XiuView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    /**
     * 初始化控件个监听按钮
     */
    private void initView() {
        View v = LayoutInflater.from(getContext()).inflate(R.layout.xiu_view, null, false);
        addView(v, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        iv_btn = (ImageView) findViewById(R.id.iv_btn);
        iv_out_circle = (ImageView) findViewById(R.id.iv_out_circle);
        fl_move_circle = (FrameLayout) findViewById(R.id.fl_move_circle);
        iv_btn.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN://手指按钮
                        //手指又按下，取消掉显示循环波纹的消息
                        handler.removeMessages(1);
                        pressDown();
                        break;
                    case MotionEvent.ACTION_UP://手指抬起
                        //取消掉循环的波纹
                        iv_out_circle.setVisibility(GONE);
                        pressUp();
                        addMoveCircle();
                        //发送延时消息，3秒后继续显示循环波纹
                        handler.sendEmptyMessageDelayed(1, 3000);
                        if (onBtnPressListener != null) {
                            onBtnPressListener.btnClick();
                        }
                        break;
                }
                return true;
            }
        });
        startOutCircleAnim();
    }

    /**
     * 发散波纹
     */
    private void addMoveCircle() {
        final ImageView imageView = new ImageView(getContext());
        LayoutParams lp = new LayoutParams(dip2px(getContext(), 100), dip2px(getContext(), 100));
        lp.gravity = Gravity.CENTER;
        imageView.setLayoutParams(lp);
        imageView.setImageResource(R.mipmap.outcircle);
        fl_move_circle.addView(imageView);
        ObjectAnimator outCircleAnimX = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 5f);
        ObjectAnimator outCircleAnimY = ObjectAnimator.ofFloat(imageView, "scaleY", 1f, 5f);
        ObjectAnimator alphaAnim = ObjectAnimator.ofFloat(imageView, "alpha", 0.6f, 0);
        outCircleAnimX.setDuration(1500);
        outCircleAnimY.setDuration(1500);
        alphaAnim.setDuration(1500);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(outCircleAnimX, outCircleAnimY, alphaAnim);
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //移除掉刚才添加的波纹
                fl_move_circle.removeView(imageView);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
    }

    /**
     * 开始循环的放大缩小波纹
     */
    private void startOutCircleAnim() {
        ObjectAnimator outCircleAlpha = ObjectAnimator.ofFloat(iv_out_circle, "alpha", 0.2f, 0.6f);
        outCircleAlpha.setDuration(1000);

        ObjectAnimator outCircleAnimX = ObjectAnimator.ofFloat(iv_out_circle, "scaleX", 1f, 1.18f, 1f);
        ObjectAnimator outCircleAnimY = ObjectAnimator.ofFloat(iv_out_circle, "scaleY", 1f, 1.18f, 1f);
        outCircleAnimX.setDuration(2000);
        outCircleAnimY.setDuration(2000);
        outCircleAnimX.setRepeatCount(ValueAnimator.INFINITE);
        outCircleAnimY.setRepeatCount(ValueAnimator.INFINITE);
        outCircleAnimX.setInterpolator(new LinearInterpolator());
        outCircleAnimY.setInterpolator(new LinearInterpolator());
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(outCircleAnimX, outCircleAnimY, outCircleAlpha);
        animatorSet.start();
    }

    /**
     * 按下按钮
     */
    private void pressDown() {
        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator scaleXIn = ObjectAnimator.ofFloat(iv_btn, "scaleX", 1f, 0.94f);
        scaleXIn.setDuration(400);
        scaleXIn.setInterpolator(new LinearInterpolator());
        ObjectAnimator scaleYIn = ObjectAnimator.ofFloat(iv_btn, "scaleY", 1f, 0.94f);
        scaleYIn.setDuration(400);
        scaleYIn.setInterpolator(new LinearInterpolator());
        animatorSet.playTogether(scaleXIn, scaleYIn);
        animatorSet.start();
    }

    /**
     * 抬起按钮
     */
    private void pressUp() {
        AnimatorSet animatorSet1 = new AnimatorSet();
        ObjectAnimator scaleXOut = ObjectAnimator.ofFloat(iv_btn, "scaleX", 0.94f, 1.06f, 1f);
        scaleXOut.setDuration(500);
        scaleXOut.setInterpolator(new LinearInterpolator());
        ObjectAnimator scaleYOut = ObjectAnimator.ofFloat(iv_btn, "scaleY", 0.94f, 1.06f, 1f);
        scaleYOut.setDuration(500);
        scaleYOut.setInterpolator(new LinearInterpolator());
        animatorSet1.playTogether(scaleXOut, scaleYOut);
        animatorSet1.start();
    }

    /**
     * 根据手机的分辨率从 dip 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 按钮点击监听
     */
    public interface OnBtnPressListener {
        void btnClick();
    }

    /**
     * 模拟点击
     */
    public void onceClick(){
        //取消掉循环的波纹
        iv_out_circle.setVisibility(GONE);
        pressDown();
        pressUp();
        addMoveCircle();
    }
}

自定义控件对应的xml布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <FrameLayout
        android:id="@+id/fl_move_circle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/iv_out_circle"
        android:layout_width="120dp"
        android:layout_height="120dp "
        android:layout_gravity="center"
        android:alpha="0.6"
        android:src="@mipmap/outcircle" />

    <ImageView
        android:id="@+id/iv_btn"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_gravity="center"
        android:src="@mipmap/circle" />
</FrameLayout>

下面为使用到的素材

按钮的图标：circle.png

外圈图片:outcircle.png

控件使用的xml布局：

<com.tzj.tzjcustomview.xiuview.XiuView
        android:layout_marginTop="50dp"
        android:id="@+id/xiu_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />