【问题标题】:Slide in / Slide Out fragment animations in v21 not working properlyv21 中的滑入/滑出片段动画无法正常工作
【发布时间】:2016-02-18 15:18:01
【问题描述】:

我运行了一些简单的 slide_in 和 slide_out 动画来在用户单击任何卡片时打开/关闭,但动画无法正常工作。

首先。 Slide_in 动画不是从右上角滑动,而是从右下角滑动,正如您在图像中看到的那样。加载片段内容一段时间后,它突然正确显示。

第二。 Slide_out 对前一个片段做了一些额外的事情。

这里是slide_in和out的代码:

向左滑入

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="1000"
        android:valueTo="0"
        android:valueType="floatType" />

</set>

向右滑动

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="-1000"
        android:valueTo="0"
        android:valueType="floatType" />

</set>

向左滑出

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="0"
        android:valueTo="1000"
        android:valueType="floatType" />

</set>

向右滑出

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="0"
        android:valueTo="-1000"
        android:valueType="floatType" />

</set>

这里有动画不同阶段的屏幕截图。

State 1 - Parent fragment

State 2 - When users clics a card... animation slide in executes but It doesn't load properly

EDIT1:正在发生的事情的视频: https://youtu.be/3XtaRTqfTCk

EDIT2:片段布局

父片段布局:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/cc2"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar2"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/header2"
            android:src="@drawable/capitalmarkets"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/anim_toolbar2"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            android:elevation="4dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

子片段布局:

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/anim_toolbar3"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        android:elevation="4dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="16dp"
        android:id="@+id/l1"
        android:orientation="horizontal">

    </LinearLayout>

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:background="@color/md_grey_100"
        android:paddingTop="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:layout_height="150dp" />

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />



</android.support.design.widget.CoordinatorLayout>

【问题讨论】:

    标签: android animation fragment slide


    【解决方案1】:

    试试这个:

    进入res/animator文件夹创建

    fragment_slide_left_enter.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="100dp" android:valueTo="0dp"
            android:valueType="floatType"
            android:propertyName="translationX"
            android:duration="2500" />
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="0.0" android:valueTo="1.0"
            android:valueType="floatType"
            android:propertyName="alpha"
            android:duration="2500"/>
    </set>
    

    fragment_slide_left_exit.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="0dp" android:valueTo="-100dp"
            android:valueType="floatType"
            android:propertyName="translationX"
            android:duration="1500" />
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="1.0" android:valueTo="0.0"
            android:valueType="floatType"
            android:propertyName="alpha"
            android:duration="1500" />
    </set>
    

    fragment_slide_right_enter.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="-100dp" android:valueTo="0dp"
            android:valueType="floatType"
            android:propertyName="translationX"
            android:duration="2500" />
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="0.0" android:valueTo="1.0"
            android:valueType="floatType"
            android:propertyName="alpha"
            android:duration="2500" />
    </set>
    

    fragment_slide_right_exit.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="0dp" android:valueTo="100dp"
            android:valueType="floatType"
            android:propertyName="translationX"
            android:duration="1500" />
        <objectAnimator
            android:interpolator="@android:interpolator/decelerate_quint"
            android:valueFrom="1.0" android:valueTo="0.0"
            android:valueType="floatType"
            android:propertyName="alpha"
            android:duration="1500" />
    </set>
    

    然后在你的ActivityMain.java 中使用这个提交片段:

    Fragment fr;
    FragmentManager fm = getFragmentManager();
    FragmentTransaction fragmentTransaction = fm.beginTransaction();
    fr = new YourFragment();
    
    //Custom Animation
    fragmentTransaction.setCustomAnimations(R.animator.fragment_slide_left_enter,
                                    R.animator.fragment_slide_left_exit,
                                    R.animator.fragment_slide_right_enter,
                                    R.animator.fragment_slide_right_exit);
    
    
    fragmentTransaction.replace(R.id.fragmentcontainer, fr);
    fragmentTransaction.addToBackStack(null);
    fragmentTransaction.commit();
    

    【讨论】:

    • 感谢您的快速回答!我试过了,但仍然有类似的问题。请观看此视频:youtu.be/3XtaRTqfTCk
    • 我想知道,这个问题是否与折叠工具栏布局有关?
    • 动画效果很好,我认为这是与布局相关的渲染问题。但我尝试了 collapsingToolbar 的代码,它可以工作...显示你的 layout.xml
    • 添加到问题中的父子片段的布局。编辑 2.
    • 我通过从子片段中删除 CoordinatorLayout 部分修复了它,因为它不需要调整布局。但是当回到具有 CoordinatoLayout 的父片段时,我仍然遇到同样的问题。
    猜你喜欢
    • 1970-01-01
    • 2014-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多