浮动操作按钮变形

Question

浮动操作按钮变形

3

我想制作类似这个，但是我没有找到任何教程或者其他东西来帮助我制作它（在谷歌网站上称为变形）。请问有人能告诉我如何制作或者提供一些参考资料吗？

编辑：我想将布局从不可见设置为可见... 你知道我应该什么时候执行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();
        }
    });

- Tomáš Petrovčín

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eugene H · Accepted Answer

您需要为视图（在本例中为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);
            }
        }
    });