点击展示/收起Animation

点击展示/收起Animation

  点击展示/收起的动画在应用中经常用到，和大家一起分享一下。

1、布局文件activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/layer1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/tv1"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:text="展开"
android:textSize="12sp" />
<TextView
android:id="@+id/tv2"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:text="展开"
android:textSize="12sp" />
<TextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:text="展开"
android:textSize="12sp" />
<TextView
android:id="@+id/tv4"
android:layout_width="0dp"
android:layout_height="30dp"

4000
android:layout_weight="1"
android:gravity="center"
android:text="展开"
android:onClick="onClick"
android:textSize="12sp" />
<TextView
android:id="@+id/tv5"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
android:gravity="center"
android:onClick="onClick"
android:text="展开"
android:textSize="12sp" />
<ImageView
android:id="@+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="@+id/detail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0">

<TextView
android:id="@+id/tvDetail"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center"
android:text="详情内容" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#87ff00ff"></LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

2、MainActivity

public class MainActivity extends AppCompatActivity {
private int mLayoutHeight = 0;  //动画执行的padding高度
private boolean isOpen = false; //是否开启状态
private TextView tv1;
private LinearLayout detail;
private ImageView icon;
private TextView tv2;
private TextView tv3;
private TextView tv4;
private TextView tv5;
private TextView tvDetail;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initAnimation();
}
private void initView() {
tv1 = (TextView) findViewById(R.id.tv1);
tv2 = (TextView) findViewById(R.id.tv2);
tv3 = (TextView) findViewById(R.id.tv3);
tv4 = (TextView) findViewById(R.id.tv4);
tv5 = (TextView) findViewById(R.id.tv5);
detail = (LinearLayout) findViewById(R.id.detail);
tvDetail = (TextView) findViewById(R.id.tvDetail);
icon = (ImageView) findViewById(R.id.icon);
}
private void initAnimation() {
detail.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
detail.getViewTreeObserver().removeGlobalOnLayoutListener(this);//移除所有监听
mLayoutHeight = detail.getHeight();
detail.setPadding(0,-mLayoutHeight,0,0);//隐藏当前控件
}
});
}
private void showHintAnimation(final TextView tv){
tv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
ValueAnimator valueAnimator = new ValueAnimator();
if (isOpen){
valueAnimator.setIntValues(0, -mLayoutHeight);
tv.setText("展开");
}else {
valueAnimator.setIntValues(-mLayoutHeight, 0);
tv.setText("收起");
}
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animator) {
int value = (int) animator.getAnimatedValue();
detail.setPadding(0,value,0,0);
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
tv.setClickable(false);
}
@Override
public void onAnimationEnd(Animator animator) {
tv.setClickable(true);
}
@Override
public void onAnimationCancel(Animator animator) {}

@Override
public void onAnimationRepeat(Animator animator) {}
});

valueAnimator.setDuration(5000);
setAnimationMode(tv,valueAnimator);
valueAnimator.start();
ViewCompat.animate(icon).rotationBy(720f).setDuration(5000).start();
isOpen = !isOpen;
}
});
}
/*
animation.setInterpolator(new AccelerateInterpolator());  加速
animation.setInterpolator(new DecelerateInterpolator());  减速
animation.setInterpolator(new AccelerateDecelerateInterpolator());  先加后减
animation.setInterpolator(new AnticipateInterpolator());先反向执行一段，然后再加速反向回来
animation.setInterpolator(new AnticipateOvershootInterpolator());同上先反向一段，然后加速反向回来
animation.setInterpolator(new BounceInterpolator());执行完毕之后会回弹跳跃几段
animation.setInterpolator(new CycleInterpolator(2));循环，动画循环一定次数，值的改变为一正弦函数：Math.sin(2* mCycles* Math.PI* input)
animation.setInterpolator(new LinearInterpolator()); 线性均匀改变
animation.setInterpolator(new OvershootInterpolator());加速执行，结束之后回弹
*/
private void setAnimationMode(TextView tv,ValueAnimator valueAnimator) {
switch (tv.getId()){
case R.id.tv1:
valueAnimator.setInterpolator(new AccelerateInterpolator());
tvDetail.setText("加速动画");
break;
case R.id.tv2:
valueAnimator.setInterpolator(new DecelerateInterpolator());
tvDetail.setText("减速动画");
break;
case R.id.tv3:
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
tvDetail.setText("先加后减动画");
break;
case R.id.tv4:
valueAnimator.setInterpolator(new AnticipateInterpolator());
tvDetail.setText("先反向执行一段，然后再加速反向回来");
break;
case R.id.tv5:
valueAnimator.setInterpolator(new BounceInterpolator());
tvDetail.setText("执行完毕之后会回弹跳跃几段");
break;
}
}
public void onClick(View view) {
switch (view.getId()){
case R.id.tv1:
showHintAnimation(tv1);
break;
case R.id.tv2:
showHintAnimation(tv2);
break;
case R.id.tv3:
showHintAnimation(tv3);
break;
case R.id.tv4:
showHintAnimation(tv4);
break;
case R.id.tv5:
showHintAnimation(tv5);
break;
}
}
}

在以上代码中展示了几种显示的方式，还要几种显示方式大家可以去测试一下。先加后减的动画效果感觉看不出来。