Android ViewAnimator 实现仿美图的添加购物车

如果我们的工程中，动画特效比较多的话，用属性动画实现的话，工时长，维护难，所以今天要介绍的主角ViewAnimator，简洁易懂！

1、我们需要在app的build.gradle中添加我们所需的ViewAnimator
compile 'com.github.florent37:viewanimator:1.0.5'
2、布局XML

• iv_s减号图标;
• tv_c数量;
• iv_a添加图标;

<ImageView
        android:id="@+id/iv_s"
        android:layout_width="wrap_content"
        android:layout_height="42dp"
        android:layout_gravity="right"
        android:layout_marginTop="120dp"
        android:alpha="0"
        android:padding="2dp"
        android:src="@drawable/sub"/>
    <TextView
        android:id="@+id/tv_c"
        android:layout_width="wrap_content"
        android:layout_height="42dp"
        android:layout_gravity="right"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="120dp"
        android:alpha="0"
        android:gravity="center"
        android:text="1"
        android:textSize="22sp"
        app:layout_constraintLeft_toRightOf="@+id/iv_s"/>
    <ImageView
        android:id="@+id/iv_a"
        android:layout_width="wrap_content"
        android:layout_height="42dp"
        android:layout_gravity="right"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="120dp"
        android:alpha="100"
        android:padding="2dp"
        android:src="@drawable/add"
        app:layout_constraintLeft_toRightOf="@+id/tv_c"
        />

2、MainActivity.java

        final ImageView sub= (ImageView) findViewById(R.id.iv_s);
        final ImageView add= (ImageView) findViewById(R.id.iv_a);
        final TextView tvCount= (TextView) findViewById(R.id.tv_c);
        add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (count == 0) {
                    ViewAnimator.animate(sub)
                            .translationX(add.getLeft() - sub.getLeft(), 0)
                            .rotation(360)
                            .alpha(0, 255)
                            .duration(300)
                            .interpolator(new DecelerateInterpolator())
                            .andAnimate(tvCount)
                            .translationX(add.getLeft() - tvCount.getLeft(), 0)
                            .rotation(360)
                            .alpha(0, 255)
                            .interpolator(new DecelerateInterpolator())
                            .duration(300)
                            .start();
                }
                count++;
                tvCount.setText(count + "");
            }
        });
        sub.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                count--;
                tvCount.setText(count + "");
                if (count == 0) {
                    ViewAnimator.animate(sub)
                            .translationX(0, add.getLeft() - sub.getLeft())
                            .rotation(-360)
                            .alpha(255, 0)
                            .duration(300)
                            .interpolator(new AccelerateInterpolator())
                            .andAnimate(tvCount)
                            .onStop(new AnimationListener.Stop() {
                                @Override
                                public void onStop() {

                                }
                            })
                            .translationX(0, add.getLeft() - tvCount.getLeft())
                            .rotation(-360)
                            .alpha(255, 0)
                            .interpolator(new AccelerateInterpolator())
                            .duration(300)
                            .start();
                }

            }
        });

• translationX 横向移动
• rotation 旋转方向(360正向旋转 -360逆向旋转)
• alpha 透明度
• duration 动画显示速度
• interpolator 区间的动画 可以控制动画的变化速率(AccelerateInterpolator就是一个加速运动的Interpolator，而DecelerateInterpolator就是一个减速运动的Interpolator)
• andAnimate 用于多个view控件同时显示特效
• thenAnimate 表示前面的动画执行完毕后再执行的动画
• onStop 表示在动画结束之后所需要执行的(自己实现)

最终的实现效果图： 动画按钮.gif