Question

我有一张RecyclerView，其中一些卡片各有一个迷你浮动动作按钮。单击一张卡时，卡和工厂上的图像将用于共享元素转换。

执行返回转换时，浮动操作按钮＆＃34;快照＆＃34;回到它原来的位置，而不是像它应该的那样很好地制作动画。

下面是一个显示问题的GIF：https://gfycat.com/SnappySeparateDeer

我的代码开始活动和过渡：

Intent intent = new Intent(mContext, PlayActivity.class);

                Pair<View, String> p1 = Pair.create((View)holder.coverArt, "coverArt");
                Pair<View, String> p2 = Pair.create((View) holder.fab, "fab");
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(mActivity, p1, p2);

                mContext.startActivity(intent, options.toBundle());

卡上的迷你工厂：

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            app:fabSize="mini"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:layout_anchor="@id/coverArt"
            app:layout_anchorGravity="bottom|right|end"
            android:src="@drawable/ic_favorite"
            android:layout_margin="16dp"
            android:clickable="true"
            android:transitionName="fab"/>

和活动中的那个：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/coverArt"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_favorite"
        android:layout_margin="16dp"
        android:clickable="true"
        android:transitionName="fab"/>

编辑：我想增加赏金，但由于某种原因，似乎该功能未在SO中实施。我非常确定我可以在正确的答案中添加额外的赏金积分，因此会再增加+50。谢谢！

Answer 1

尝试保持窗口和片段退出/输入转换，如下所述：

<?xml version="1.0" encoding="utf-8"?>
<fade xmlns:android="http://schemas.android.com/apk/res/" android:duration="500"/>

共享元素转换为：

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="500"
           android:interpolator="@android:interpolator/decelerate_cubic">
    <changeBounds>
    <arcMotion
        android:maximumAngle="90"
        android:minimumHorizontalAngle="90"
        android:minimumVerticalAngle="0" />

    </changeBounds>
</transitionSet>

我不确定ImageView以外的其他任何内容是否具有正确的过渡效果。我尝试了上次制作的自定义视图，并在进入转换时遇到了类似的问题，而返回是完美的。

Answer 2

步骤：您需要自定义详细布局，然后完美地过渡动画。像

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="275dp">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:transitionName="picture"
            app:layout_collapseMode="parallax" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="16dp"
            android:src="@mipmap/like"
            android:transitionName="fabButton"
            app:fabSize="normal" />

    </RelativeLayout>

</FrameLayout>

注意：您可以自定义布局和图像的大小。

共享元素转换与浮动动作按钮研磨

2 个答案: