【Android动画九章】-浮动菜单

上几节讨论了各种各样的属性动画，这里将这些知识组合起来，模拟如下图所示的浮动菜单功能。

1.activity_main.xml:

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

    <ImageView
        android:id="@+id/img1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@drawable/pic1" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@drawable/pic2" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@drawable/pic3" />
    <ImageView
        android:id="@+id/img_more"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom|right"
        android:layout_margin="20dp"
        android:src="@drawable/more" />
</FrameLayout>

父布局采用了FrameLayout布局方式，所有ImageView控件叠在一起放在右下角。
2.MainActivity.java:

package demo.androidwar.com.animatormenu;

import android.animation.ObjectAnimator;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView imageView1, imageView2, imageView3, imageViewMore;
    private boolean isSelected = false;
    private List<View> list = new ArrayList<>();

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

    }

    private void initViews() {
        imageView1 = (ImageView) findViewById(R.id.img1);
        imageView2 = (ImageView) findViewById(R.id.img2);
        imageView3 = (ImageView) findViewById(R.id.img3);
        imageViewMore = (ImageView) findViewById(R.id.img_more);
        imageViewMore.setOnClickListener(this);
        imageView1.setOnClickListener(this);
        imageView2.setOnClickListener(this);
        imageView3.setOnClickListener(this);
        list.add(imageView1);
        list.add(imageView2);
        list.add(imageView3);
    }

    private void endAnimator() {
        isSelected = false;
        ObjectAnimator animator = ObjectAnimator.ofFloat(imageViewMore, "rotation", 0F, 360F).setDuration(300);
        animator.setInterpolator(new BounceInterpolator());//设置插值器
        animator.start();//开始动画
        for (int i = 0; i < 3; i++) {
            ObjectAnimator.ofFloat(list.get(i), "translationY", -200 * (i + 1), 0F).setDuration(1000).start();
        }
    }

    private void startAnimator() {
        isSelected = true;
        for (int i = 0; i < 3; i++) {
            ObjectAnimator animator = ObjectAnimator.ofFloat(list.get(i), "translationY", 0F, -200 * (i + 1)).setDuration(1000);
            animator.setInterpolator(new BounceInterpolator());//设置插值器
            animator.start();
        }
        ObjectAnimator.ofFloat(imageViewMore, "rotation", 0F, 360F).setDuration(300).start();

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_more:
                if (!isSelected) {
                    startAnimator();
                } else {
                    endAnimator();
                }
                break;
            case R.id.img1:
                Toast.makeText(MainActivity.this, "img1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img2:
                Toast.makeText(MainActivity.this, "img2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.img3:
                Toast.makeText(MainActivity.this, "img3", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

这里核心方法有两个，一个是startAnimator，一个是endAnimator方法。通过遍历每一个ImageView的位移都会乘以相应的倍数。同时为了弹出菜单更生动一些，同时设置了插值器。为每一个菜单设置了单击监听，单击时对应Toast相应信息。运行项目如下：