Question

我想制作this，但我没有找到任何关键或其他任何方法。（它在谷歌网站上被称为Morph）任何人都可以告诉我如何或发送一些参考文件吗？

编辑：

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

浮动动作按钮变形

1 个答案: