具有半径的CardView上的共享元素转换

Question

我已经在这个问题上工作了好几个星期,我仍然无法解决这个问题.

所以,我有一个包含带有ImageView的LinearLayout的CardView.

没有该半径,Shared Element Transition可以无缝地工作.但是,当我将半径(app:cardCornerRadius ="25dp")添加到该CardView时,共享元素转换看起来很难看,因为它首先删除半径然后开始动画.

第一种方法:ObjectAnimator

我创建了ObjectAnimator来为卡上的半径值设置动画,并在动画结束后开始转换.

ObjectAnimator animator = ObjectAnimator
            .ofFloat(view, "radius", AppUtil.dpAsPixel(this, 25), 0);
animator.setDuration(150);
animator.addListener( // start new Activity with Transition );
animator.start();

这有效,但看起来不太好,因为转换在开始转换之前等待动画完成.我需要的是半径是在转换到新Activity时的动画(类似于TransitionSet中的ORDERING_TOGETHER).

第二种方法 - ChangeImageTransform

我已经阅读了StackOverflow帖子来使用Transformation Class,如ChangeImageTransform和ChangeBounds.

我确实定义了我建议的应用程序主题(my_transition包含ChangeImageTransform transitionSet)

<item name="android:windowSharedElementEnterTransition">@transition/my_transition</item>
<item name="android:windowSharedElementExitTransition">@transition/my_transition</item>

但它不起作用..

第三种方法 - 天真

我的最后一次尝试是强制目标ImageView的半径也是25dp.因为目标ImageView可能是方形的,因此可能我的CardView被转换为方形,但正如您所猜测的那样,它不起作用.

第四种方法 - 不使用CardView

如您所见,我正在使用Penguin图像并使用CardView来制作半径.我可以使用图像转换使图像四舍五入,但我仍然认为这不是创建共享元素转换的正确方法.

这是我的问题,有没有办法使CardView半径的共享元素转换工作而不首先删除半径？

Answer 1

我终于能够解决它了.对于那些感兴趣的人,这是如何:

为什么在开始转换之前删除半径？因为目标ImageView没有任何半径.

activity_detail.xml

<ImageView
    android:id="@+id/iv_image_cover"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:scaleType="centerCrop"
    android:src="@{animal.imageRes}"
    android:transitionName="animalImage"
    tools:src="@drawable/acat"
/>

当我使用没有半径的CardView时,它并不显着,但它实际上变成了目标共享视图.

2. 要实现半径到无半径转换,您必须将目标共享视图设置为四舍五入.我只是使用卡片视图(半径)包裹它.

activity_detail.xml

<android.support.v7.widget.CardView
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:transitionName="card"
    app:cardCornerRadius="25dp"
>

    <ImageView
        android:id="@+id/iv_image_cover"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="centerCrop"
        android:src="@{animal.imageRes}"
        android:transitionName="animalImage"
        tools:src="@drawable/acat"
    />

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

3. 务必将makeSceneTransition更改为使用"card"而不是"animalImage"

ListActivity.class

ActivityOptionsCompat option = ActivityOptionsCompat
.makeSceneTransitionAnimation(ListActivity.this, cardView, "card");

startActivity(intent, option.toBundle());

4. 在DetailActivity中,您可以在转换开始时启动半径动画.

DetailActivity.java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getWindow().getSharedElementEnterTransition()
        .addListener(new Transition.TransitionListener() {
            @Override
            public void onTransitionStart(Transition transition) {
                ObjectAnimator animator = ObjectAnimator
                    .ofFloat(activityDetailBinding.card, "radius", 0);
                animator.setDuration(250);
                animator.start();
            }
        });
}

5. 享受平稳过渡

注意:布局和活动的要点

Answer 2

根据 Ovidiu 的回答，这是一个可以为角落设置动画的工作过渡

https://gist.github.com/StefanDeBruijn/d45807d386af0e066a03186fe00366e8

这可以以编程方式添加到输入共享转换集或通过 xml：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <transitionSet>
        <targets>
            <target android:targetId="@id/backdrop" />
        </targets>
        <!-- Custom transition to take care of rounded corner to square corners transition -->
        <transition
            class=".ChangeOutlineRadius"
            app:endRadius="@dimen/square_corner_radius"
            app:startRadius="@dimen/default_corner_radius" />
        <!-- Default shared element transitions -->
        <changeBounds />
        <changeTransform />
        <changeClipBounds />
        <changeImageTransform />
    </transitionSet>
</transitionSet>

不要忘记添加到您的 attrs.xml：

   <declare-styleable name="ChangeOutlineRadius">
        <attr name="startRadius" format="dimension" />
        <attr name="endRadius" format="dimension" />
    </declare-styleable>