点击展示/收起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"
                    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;
        }
    }
}

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