活动之间的卡片翻转动画

Question

活动之间的卡片翻转动画

androidanimationandroid-fragmentsandroid-activity

22

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

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

上面的链接展示了如何在静态布局之间切换。我想要在拥有动态布局的两个活动之间执行CardFlip。谢谢您提前帮助！:)

我有两个活动...

一个包含产品详情（例如 Galaxy s3）的 Main_Activity
一个查询用户搜索请求的 Search_Activity。

Main_Activity 中有一个搜索按钮。当单击该按钮时，Main_Activity 视图必须翻转到 Search_Activity。同样地，一旦用户选择了一个产品，它也应该进行Card-Flip。

我尝试按照上述URL中提到的实现，但它仅在使用XML定义的两个静态布局之间切换。我正在ActionBar中实现搜索。

- Augustus Francis

你需要更加具体地说明问题是什么。 - Fabian Lauer

这就是你要的……Fabin - Augustus Francis

3个回答

4

如接受的答案所述，简单地在活动之间执行卡片翻转动画是不可能的（该答案仅将新活动从屏幕中心展开到两侧）。

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

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

以下是我解决这个问题并在我的2个活动之间制作翻转卡片动画的方法，但它非常适用于我的活动内容。为了一些背景，我的第一个活动包含全屏图像，我只想将该图像翻转到相同大小的另一个视图。

通过调用 overridePendingTransition(0, 0) 来禁用自动窗口动画。
在 bundle 中传递足够的信息给新活动，以便重新创建视图（对我来说，这是图像的大小和位置，以及要加载的资源）。
在您的新视图上设置 onPreDrawListener，在其中重新创建父活动的视图（在我的情况下是图像）。
只需翻转两个视图。为此，我重新编写了您发布的 Flip Card 片段转换教程中的代码，并使用 ObjectAnimator 以编码方式重写了它。
重写您的 onBackPressed() 方法，以按相反顺序运行相同的动画。

有了这种机制，您可以执行任何自定义过渡，因为您只是在视图之间进行动画处理。这里有更多关于该技术的信息：https://www.youtube.com/watch?v=ihzZrS69i_s#t=1001

- nbarraille

3

您可以像这个附带的gif一样在两个活动之间制作卡翻转动画。

按照以下步骤操作：

首先，在res > anim > fade_in.xml中创建XML fade_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>

然后在anim文件夹下创建第二个XML文件fade_out.xml，路径为 res > anim > 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>

感谢！愉快编码 :)

- AG-Developer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fox · Accepted Answer

根据我的理解，你无法在活动之间完全复制相同的翻转卡片效果。
但是，如你可能已经知道，你需要使用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>

淡出效果文件 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>

请注意，旋转动画仅围绕Z轴（垂直于屏幕的轴线）以给定的枢轴位置（即x、y坐标）进行旋转，因此您无法使用它来沿Y轴翻转。
我所做的是在保持高度不变的同时，缩放中间的宽度，从而创造出活动侧面翻转的错觉。此外，在宽度为0时，进入和退出活动分别淡入淡出，因此看起来它们在切换。 flip in 动画的 scale 的 duration 属性必须与两个动画的所有 startOffset 属性相同。
虽然不完美，但对我很有用。
希望能帮到您。