使用属性动画以及自定义view实现图片的显示与隐藏

效果图为:点击加号按钮,加号隐藏,减号旋转显示,另外三张图片也旋转一定角度显示

点击减号按钮,减号隐藏,加号旋转显示,另外三张图片也旋转一定角度隐藏

首先放五张图片,使用RelativeLayout布局,因为可以使这五张图片重叠起来

customer.xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <RelativeLayout
        android:layout_marginRight="20dp"
       android:gravity="right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_pingbi"
        android:src="@drawable/shiled"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_copy"
        android:src="@drawable/copylink"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_report"
        android:src="@drawable/report"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_jian"
        android:src="@drawable/packuphorizontal"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_show"
        android:src="@drawable/show"
        />

</RelativeLayout>
</LinearLayout>

使用自定义view的方式,继承RelativeLayout,引入customer.xml布局

public class CustomerView extends RelativeLayout {
    private ImageView image_show;
    private ImageView image_jian;
    private ImageView image_report;
    private ImageView image_copy;
    private ImageView image_pingbi;
    public CustomerView(Context context) {
        super(context);
    }

    public CustomerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.customer, this, false);
        image_show = view.findViewById(R.id.image_show);
        image_jian = view.findViewById(R.id.image_jian);
        image_report = view.findViewById(R.id.image_report);
        image_copy = view.findViewById(R.id.image_copy);
        image_pingbi = view.findViewById(R.id.image_pingbi);

        //加号按钮的点击事件,展示另外三张图片
        image_show.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                image_jian.setVisibility(View.VISIBLE);
                image_show.setVisibility(View.GONE);
                showMenu();
            }
        });

        //减号的点击事件,隐藏另外三张图片
        image_jian.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                image_jian.setVisibility(View.GONE);
                image_show.setVisibility(View.VISIBLE);
                hideMenu();
            }
        });

        addView(view);
    }

    public CustomerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    //属性动画,,展示出来
    public void showMenu(){
        //三个平移动画 平移出来
        ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi
                ,"translationX",0,-65*3);
        ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy
                ,"translationX",0,-65*2);
        ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report
                ,"translationX",0,-65*1);

        //旋转动画
        ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_jian, "rotation", 0, 135, 0);
        ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);
        ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);
        ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);

        //组合动画
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(800);//动画时长
        animatorSet.setInterpolator(new OvershootInterpolator());
        //设置动画一起播放
        animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);

        animatorSet.start();

    }

    public void hideMenu(){
        //三个平移回去
        ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi
                , "translationX", image_report.getTranslationX(), 0);
        ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy
                , "translationX", image_copy.getTranslationX(), 0);
        ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report
                , "translationX", image_pingbi.getTranslationX(), 0);
        ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_show, "rotation", 0, 135, 0);
        ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);
        ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);
        ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(800);
        animatorSet.setInterpolator(new OvershootInterpolator());
        animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);

        animatorSet.start();
    }

}

在activity_main.xml里面引入CustomerView的布局

 <com.example.day180131zuoye.customview.CustomerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>