活动之间的卡片翻转动画

Question

如何在活动之间进行卡片翻转动画

http://developer.android.com/training/animation/cardflip.html

上面的链接在静态布局之间切换..我想做一个CardFlip在具有动态布局的 2 个活动之间..在此先感谢..:)

我有两个活动...

1. 包含产品详细信息的Main_Activity（比如 Galaxy s3）
2. 查询用户搜索请求的Search_Activity..

Main_Activity 中有一个搜索按钮。当您单击按钮时，Main_Activity 视图必须将卡片翻转到 Search_Activity。同样，一旦用户选择了产品，它应该Card-Flip 反之亦然。

我尝试按照上述 URL 中的说明实现。但它只在使用 XML 定义的两个静态布局之间翻转。我正在ActionBar中实现搜索

Answer 1

据我所知，您无法在活动之间进行完全相同的卡片翻转。
但是，
您可能已经知道，您需要overridePendingTransition() 来为活动之间的过渡设置动画（doc here）。 现在您所需要的只是一个动画资源来完成这项工作。 我用过这些：
fade_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="200"
    android:fromXScale="0.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="200"
    android:toXScale="1.0"
    android:toYScale="1.0" />

<alpha
    android:duration="1"
    android:fromAlpha="0.0"
    android:startOffset="200"
    android:toAlpha="1.0" />
</set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="200"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.0"
    android:toYScale="1.0" />

<alpha
    android:duration="1"
    android:fromAlpha="1.0"
    android:startOffset="200"
    android:toAlpha="0.0" />
</set>

请注意，旋转动画仅在给定的枢轴位置（x，y 坐标）处围绕 Z 轴（进入屏幕的那个）旋转，因此您不能使用它围绕 Y 轴翻转。
我所做的是缩放中间周围的宽度，同时保持高度，这会产生活动在其一侧打开的错觉。此外，当宽度为 0 时，进入和退出活动分别淡入和淡出，因此看起来它们正在切换。翻转动画的scale 的duration 属性必须与两个动画的所有startOffset 属性相同。
不完美，但对我有用。
希望对您有所帮助。

Answer 2

不可能像接受的答案中所述那样简单地在活动之间制作卡片翻转动画（这只是将新活动从屏幕中间扩展到两侧）。

原因在于，当调用overridePendingTransition() 时，您只是将动画应用到启动的活动，而不是当前打开的活动。

在链接到的（非常好的）教程中，总共有 4 个动画，即每个过渡 2 个动画（一个用于进入屏幕的片段，一个用于退出屏幕的片段）。

这是我解决这个问题并在我的 2 个活动之间制作翻转卡片动画的方法，但它对我的活动内容非常定制。在某些情况下，我的第一个活动包含一个全屏图像，我只是希望将该图像翻转到另一个相同大小的视图。

1. 通过调用overridePendingTransition(0, 0)禁用自动窗口动画
2. 在第二个 Activity 的包中，传递足够的信息让新 Activity 重新创建视图（对我来说，它是图像的大小和位置，以及要加载的资源）
3. 在您的新视图上设置一个 onPreDrawListener，您可以在其中重新创建父活动的视图（在我的例子中是图像）
4. 您只需翻转 2 个视图。为此，我重写了您发布的 Flip Card 片段转换教程中的代码，并使用 ObjectAnimators 将其重写为代码。
5. 覆盖您的 onBackPressed() 方法以相反的顺序运行相同的动画

使用这种机制，您可以进行任何自定义转换，因为您只是在视图之间制作动画。 以下是有关该技术的更多信息：https://www.youtube.com/watch?v=ihzZrS69i_s#t=1001

Answer 3

您可以在两个活动之间制作这样的卡片翻转动画（附加 gif）。

按照以下步骤操作：

首先在动画res > anim > fade_in.xml中创建XMLfade_in.xml

fade_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fromXScale="0.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="2000"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="1"
        android:fromAlpha="0.0"
        android:startOffset="2000"
        android:toAlpha="1.0" />
</set>

然后在动画 res > anim > fade_out.xml 中创建第二个 XML fade_out.xml

fade_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="1"
        android:fromAlpha="1.0"
        android:startOffset="2000" 
        android:toAlpha="0.0" />
</set>

在创建两个动画 XML 之后，然后在 res>value>style.xml 中设置值

现在小心在style.xml内添加此代码，用于在所有活动中设置卡片翻转动画。（如果您希望在选定的两个活动之间设置此动画，请在.java。）

在style.xml中添加代码

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>    

                            <!-- add code below -->
       <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
   </style>

   <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
       <item name="android:activityOpenEnterAnimation">@anim/fade_in</item>
       <item name="android:activityOpenExitAnimation">@anim/fade_out</item>
       <item name="android:activityCloseEnterAnimation">@anim/fade_in</item>
       <item name="android:activityCloseExitAnimation">@anim/fade_out</item>
   </style>

</resources>

谢谢！！快乐编码:)