android 美图购物车,Android ViewAnimator 实现仿美图的添加购物车的按钮

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

1、我们需要在app的build.gradle中添加我们所需的ViewAnimator

compile 'com.github.florent37:viewanimator:1.0.5'

2、布局XML

iv_s减号图标;

tv_c数量;

iv_a添加图标;

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"/>

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"/>

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