android - 活动之间的卡片翻转动画

Question

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

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

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

我有两个活动...

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

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

我尝试按照上述 URL 中的说明实现。但它只在使用XML. 我正在实施搜索ActionBar

Answer 1

据我所知，您不能在活动之间进行完全相同的卡片翻转。
但是，
您可能已经知道您需要overridePendingTransition()在活动之间进行动画转换（此处的文档）。现在您只需要一个动画资源就可以了。我使用了这些：
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>

淡出.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 时，进入和退出活动分别淡入和淡出，因此看起来它们正在切换。动画中翻转的属性duration必须与两个动画的所有属性相同。 不完美，但对我有用。 希望能帮助到你。scalestartOffset

Answer 2

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

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

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

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

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

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

Answer 3

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

按着这些次序：

首先fade_in.xml在anim 中创建XMLres > anim > fade_in.xml

淡入淡出.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>

fade_out.xml然后在 anim 中 创建第二个 XMLres > anim > fade_out.xml

淡出.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>

谢谢 ！！快乐编码:)