共享元素和循环显示

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关于此确切转换的信息。

在本文的最后，有一个项目档案帮助我做了很多工作。