Android的共享视图转换结合渐变过渡视图、Android

2023-09-12 05:48:28 作者:说不完的话

我有一个是通过一个共享的元素动画的活动。这是一个基本的ImageView的转变,工作得很好。

I have an activity that is passed a shared element animation. It's a basic ImageView transition, working just fine.

现在,在活动的其他内容我想有一个渐变动画。现在,这适用于所有的元素,但在相同的ViewGroup作为ImageView的(共享视图)的意见。

Now, for the other elements in the Activity I'd like to have a fade animation. Now, this works for all the elements but the views in the same viewgroup as the ImageView (shared view).

我下面的布局。 ImageView的是内CollapsingToolbarLayout和AppBarLayout,我设置了这样的淡出过渡的OnCreate:

My layout below. The ImageView is within an CollapsingToolbarLayout and AppBarLayout, and I set up the fade transition like this in oncreate:

    getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
    super.onCreate(savedInstanceState);

    Fade fade = new Fade(Fade.IN);
    fade.setDuration(4000);

    getWindow().setEnterTransition(fade);
    setContentView(R.layout.article_details);

布局:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/article_details_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="10dp"
        app:expandedTitleMarginStart="10dp"
        app:expandedTitleTextAppearance="@style/title_text_appearence"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/article_details_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:transitionName="imageTrans"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.6"
             />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.ToolBar"
            android:background="#0000"
            app:layout_collapseMode="pin"
             />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:transitionGroup="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <WebView
        android:id="@+id/article_details_webview"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    app:fabSize="mini"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/star_white"
    android:layout_marginRight="16dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

因此​​,要总结。嵌套滚​​动布局和它的的WebView变淡作为成立,但AppBarLayout中的其他观点是没有的。在AppBarLayout内的ImageView的行为与共享的元素应该(移动到位的传球活动)。此外,只有一半的FloatingActionButton的褪色,其余的持久性有机污染物替代4个第二渐变过去后。

So, to summarize. The nested scroll layout and its webview is faded in as set up, but the other views within the AppBarLayout is not. The ImageView within the AppBarLayout behaves as the shared element should (moving into place from the passing Activity). Also, only half the FloatingActionButton is faded in, the rest pops in place after the 4 second fade have passed.

编辑:我确实遇到了同样的问题,因为这个家伙:Content在机器人上方的共享元素的转换

I'm actually experiencing the same issue as this guy: Content Transitions on Top of Shared Elements in android

推荐答案

我找到了解决这个问题。的问题是,这是预期的行为。你可以通过调用禁用重叠

I found a solution to this "problem". The problem is that this is intended behaviour. You can disable the overlap by calling

getWindow().setSharedElementsUseOverlay(false);`

但是,这往往不是造成假象。最后我做这两种方式,并取消了对我的活动为背景,用透明主题:

But that more often than not creates artifacts. I ended up doing it either way, and removed the background on my Activity, with a transparent theme:

<style name="Theme.Transparent" parent="@style/AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

由于我的目标是在CollapsingToolbarLayout文字褪色,我不能做到这一点,因为ImageView的是布局的孩子。我落得这样做是添加其他的ImageView具有相同的图像一个活动之间的动画,而且随着CollapsingToolbarLayout衰落它在活动共享单元转换已完成后。由于共享要素图像已经被代替新ImageView的并没有使在UI任何差异。解决的办法当然不是最优的,但只有一个我的问题 - 考虑到原料药的行为。在退出活动,我只是隐藏了更换ImageView的,而用户看到的共享元素的图像转化为地方父活动。

Since my goal was to fade in the text in the CollapsingToolbarLayout, I could not achieve this since the ImageView is a child of the layout. What I ended up doing was adding another ImageView with the same image as the one being animated between activities, and fading it in along with the CollapsingToolbarLayout after the Activity shared element transition was done. Since the shared element image already was in place the new ImageView didn't make any difference in the UI. The solution is of course not optimal, but the only one for my problem - considering how the APIs behave. When exiting the Activity I simply hide the replacement ImageView, and the user sees the shared element image translating into place in the parent Activity.

 
精彩推荐
图片推荐