浮动操作按钮变形

Question

我想制作 this，但我没有找到任何 tuts 或任何制作方法。（它在 google 网站上称为 Morph）谁能告诉我怎么做或发送一些参考资料吗？

编辑：

我想将布局从 gone 设置为 visible...你不知道我应该什么时候做 shape.setVisibility(View.VISIBLE)？我试过了，但是直到第二次点击按钮动画才会开始。（第一次点击布局只是设置可见，没有动画）

片段布局：

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:gravity="top"
    android:padding="15dp" />


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/circle"
    android:visibility="gone">

</LinearLayout>

<ImageButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:background="@color/transparent"
    android:contentDescription="share"
    android:padding="15dp"
    android:src="@drawable/ic_share_55x55px" />

片段：

        ImageButton fab = (ImageButton) view.findViewById(R.id.share);
    fab.setOnClickListener(new View.OnClickListener() {
        @TargetApi(Build.VERSION_CODES.LOLLIPOP)
        @Override
        public void onClick(View view) {
            LinearLayout shape = (LinearLayout) getActivity().findViewById(R.id.circle);
            // Create a reveal {@link Animator} that starts clipping the view from
            // the top left corner until the whole view is covered.
            Animator animator = ViewAnimationUtils.createCircularReveal(
                    shape,
                    shape.getWidth() - 130,
                    shape.getHeight()- 130,
                    0,
                    (float) Math.hypot(shape.getWidth(), shape.getHeight()));

            // Set a natural ease-in/ease-out interpolator.
            animator.setInterpolator(new AccelerateDecelerateInterpolator());

            animator.setDuration(400);

            // Finally start the animation
            animator.start();
        }
    });

Answer 1

您需要为视图设置动画（在此示例中为 LinearLayout）。将 createCircularReveal 的 x 和 y 值设置为 fab 按钮。

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        LinearLayout shape = (LinearLayout) rootView.findViewById(R.id.circle);
        // Create a reveal {@link Animator} that starts clipping the view from
        // the top left corner until the whole view is covered.
        Animator animator = ViewAnimationUtils.createCircularReveal(
            shape,
            0,
            0,
            0,
            (float) Math.hypot(shape.getWidth(), shape.getHeight()));

        // Set a natural ease-in/ease-out interpolator.
        animator.setInterpolator(new AccelerateDecelerateInterpolator());

        // Finally start the animation
        animator.start();
    }
});

这是createCircleReveal的信息

createCircularReveal(View view,
        int centerX,  int centerY, float startRadius, float endRadius);

示例项目：

https://github.com/googlesamples/android-RevealEffectBasic/

更新

与其将视图设置为 GONE，不如将其设置为 INVISIBLE。还要使视图 setEnabled(false) 以防止它被触摸等。

LinearLayout shape;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    final View view = inflater.inflate(R.layout.reveal_effect_basic, container, false);
    shape = (LinearLayout) view.findViewById(R.id.circle);
    shape.setVisibility(View.INVISIBLE);
    shape.setEnabled(false);
    ImageButton fab = (ImageButton) view.findViewById(R.id.share);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Animator animator = ViewAnimationUtils.createCircularReveal(
                shape,
                shape.getWidth() - 130,
                shape.getHeight() - 130,
                0,
                (float) Math.hypot(shape.getWidth(), shape.getHeight()));
            shape.setVisibility(View.VISIBLE);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());
            if (shape.getVisibility() == View.VISIBLE) {
                animator.setDuration(400);
                animator.start();
                shape.setEnabled(true);
            }
        }
    });

浮动操作按钮变形

Floating action button morph

android

floating-action-button