AnimatorSet製作衛星圖動畫

首先看下效果圖：

要實現這個效果很簡單，就是Animator動畫的合集使用，首先在屏幕右下角是一個Menu Button，它的下面隱藏了五個我們一會將要展示的衛星button，當點擊到menu button後，執行AnimatorSet動畫，五個衛星button做屬性動畫即可，包括X軸Y軸的平移動畫、ScaleXScaleY的縮放動畫，以及從透明到可見的alpha動畫；縮放回去的動畫就是上面動畫的相反即可。

完整代碼：

import androidx.appcompat.app.AppCompatActivity;

import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button mMenuButton;
    private Button mItemButton1;
    private Button mItemButton2;
    private Button mItemButton3;
    private Button mItemButton4;
    private Button mItemButton5;

    private boolean mIsMenuOpen = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        mMenuButton = findViewById(R.id.menu);
        mMenuButton.setOnClickListener(this);

        mItemButton1 = findViewById(R.id.item1);
        mItemButton1.setOnClickListener(this);

        mItemButton2 = findViewById(R.id.item2);
        mItemButton2.setOnClickListener(this);

        mItemButton3 = findViewById(R.id.item3);
        mItemButton3.setOnClickListener(this);

        mItemButton4 = findViewById(R.id.item4);
        mItemButton4.setOnClickListener(this);

        mItemButton5 = findViewById(R.id.item5);
        mItemButton5.setOnClickListener(this);


    }

    @Override
    public void onClick(View v) {
        if (!mIsMenuOpen) {
            mIsMenuOpen = true;
            openMenu();
        } else {
            Toast.makeText(this, "你點擊了" + v, Toast.LENGTH_SHORT).show();
            mIsMenuOpen = false;
            closeMenu();
        }
    }

    private void openMenu() {
        doAnimateOpen(mItemButton1, 0, 5, 300);
        doAnimateOpen(mItemButton2, 1, 5, 300);
        doAnimateOpen(mItemButton3, 2, 5, 300);
        doAnimateOpen(mItemButton4, 3, 5, 300);
        doAnimateOpen(mItemButton5, 4, 5, 300);
    }

    private void doAnimateOpen(View view, int index, int total, int radius) {
        if (view.getVisibility() != View.VISIBLE) {
            view.setVisibility(View.VISIBLE);
        }
        double hudu = Math.toRadians(90) / (total - 1) * index;
        float translationX = -(float) Math.sin(hudu) * radius;
        float translationY = -(float) Math.cos(hudu) * radius;

        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                ObjectAnimator.ofFloat(view, "translationX", 0, translationX),
                ObjectAnimator.ofFloat(view, "translationY", 0, translationY),
                ObjectAnimator.ofFloat(view, "scaleX", 0f, 1f),
                ObjectAnimator.ofFloat(view, "scaleY", 0f, 1f),
                ObjectAnimator.ofFloat(view, "alpha", 0f, 1));

        set.setDuration(500).start();


    }

    private void closeMenu() {
        doAnimateClose(mItemButton1, 0, 5, 300);
        doAnimateClose(mItemButton2, 1, 5, 300);
        doAnimateClose(mItemButton3, 2, 5, 300);
        doAnimateClose(mItemButton4, 3, 5, 300);
        doAnimateClose(mItemButton5, 4, 5, 300);
    }

    private void doAnimateClose(View view, int index, int total, int radius) {
        if (view.getVisibility() != View.VISIBLE) {
            view.setVisibility(View.VISIBLE);
        }
        double hudu = Math.toRadians(90) / (total - 1) * index;
        float translationX = -(float) Math.sin(hudu) * radius;
        float translationY = -(float) Math.cos(hudu) * radius;

        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                ObjectAnimator.ofFloat(view, "translationX", translationX, 0),
                ObjectAnimator.ofFloat(view, "translationY", translationY, 0),
                ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.1f),
                ObjectAnimator.ofFloat(view, "alpha", 1f, 0f));

        set.setDuration(500).start();
    }
}

佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/menu"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/menu" />


    <Button
        android:id="@+id/item1"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle1"
        android:visibility="gone" />

    <Button
        android:id="@+id/item2"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle2"
        android:visibility="gone" />

    <Button
        android:id="@+id/item3"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle3"
        android:visibility="gone" />

    <Button
        android:id="@+id/item4"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle4"
        android:visibility="gone" />

    <Button
        android:id="@+id/item5"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle5"
        android:visibility="gone" />

</FrameLayout>