共享元素和圆形展示

Question

我想做一个类似于我们在 Play 商店中可以找到的动画：https://www.youtube.com/watch?v=B5hBViIzw5Y

我已经知道如何在活动之间共享元素以及如何进行循环显示，但我正在努力按顺序做所有事情！

这是我目前为止的地方，效果还不错，但是在循环显示（隐藏项目）之后，它开始意图之前还有一点时间。

我的项目：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="2dp">

    <RelativeLayout
        android:id="@+id/secondary_back"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:visibility="gone">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:visibility="visible">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true">

            <de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/shared_element"
                android:transitionName="shared"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:src="@drawable/shared_color"
                android:visibility="gone"/>

        </LinearLayout>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/primary_back"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/ripple_background_rounded">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="16dp">

            <de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/card_image"
                android:layout_width="85dp"
                android:layout_height="85dp"
                app:civ_border_width="3dp"
                app:civ_border_color="@color/colorPrimary"/>

        </LinearLayout>

        <TextView
            android:id="@+id/card_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="24sp"
            android:textColor="@android:color/black"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:paddingTop="24dp"
            android:paddingBottom="24dp"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>

</android.support.v7.widget.CardView>

还有我启动一切的功能：

private void launchAnimation(View v, final int position) {
    // previously visible view
    final View myView = v.findViewById(R.id.primary_back);

    final View background = v.findViewById(R.id.secondary_back);

    // my shared element
    final CircleImageView sharedElement = (CircleImageView) v.findViewById(R.id.shared_element);

    // get the center for the clipping circle
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // get the initial radius for the clipping circle
    float initialRadius = (float) Math.hypot(cx, cy);

    // create the animation (the final radius is zero)
    final Animator anim =
            ViewAnimationUtils.createCircularReveal(background, cx, cy, initialRadius, 0);

    // fade in background
    final Animation fadeIn = new AlphaAnimation(0, 1);
    fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
    fadeIn.setDuration(200);

    final Animation fadeOut = new AlphaAnimation(1, 0);
    fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
    fadeOut.setDuration(200);

    // make the view invisible when the animation is done
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            background.setVisibility(View.GONE);

            Intent intent = new Intent(context, ResultActivity.class);
            // Pass data object in the bundle and populate details activity.
            intent.putExtra(ResultActivity.EXTRA_POSITION, position);
            ActivityOptionsCompat options = ActivityOptionsCompat.
                    makeSceneTransitionAnimation(activity, sharedElement, "shared");
            activity.startActivity(intent, options.toBundle());
        }
    });

    background.setVisibility(View.VISIBLE);
    background.startAnimation(fadeIn);
    myView.startAnimation(fadeOut);

    fadeIn.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            anim.start();
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            myView.setVisibility(View.GONE);
            sharedElement.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
}

如果有人知道如何简化此动画，那将非常有帮助。非常感谢。

Answer 1

对于所有可能想要制作这种动画的人，我找到了一个 article 来了解这个确切的过渡。

在本文的末尾有一个项目档案，它对我的​​工作帮助很大。