3D Flip Animation on android.support.v4.Fragment

Philipp Jahoda picture Philipp Jahoda · Aug 27, 2013 · Viewed 13.4k times · Source

I am currently reading this tutorial:

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

on flip Animations of Fragments. Unfortunately, the object-animator is only available for android.app.Fragment, and not the support Fragment.

I tried to reconstruct the .xml animations using scale and rotation animations. But now the animations are just not executed, and after the time that I've set in the animations .xml file passes, the other Fragment appears, instead of flipping.

  • Did I simply make a misstake in implementing the .xml animations?
  • Or is it not possible to do a 3D flip animation without object-animator?
  • Or is it not possible to do a 3D flip animation with the support Fragment?

Here are my .xml animations: flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >

  <!-- Before rotating, immediately set the alpha to 0. -->
 <alpha
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:duration="0" />

 <!-- Rotate. -->
 <rotate
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="800"/>

<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<alpha
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:startOffset="400"
    android:duration="1" /> 
</set>

flip_left_out.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android" >

   <!-- Rotate. -->
   <rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="180" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

 </set>

flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Before rotating, immediately set the alpha to 0. -->
<alpha
    android:duration="0"
    android:propertyName="alpha"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

<!-- Rotate. -->
<rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="180"
    android:valueTo="0" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="0.0"
    android:valueTo="1.0" />

  </set>

flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Rotate. -->
<rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="-180" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

 </set>

And here is the code where they are executed:

FragmentTransaction trans = getActivity().getSupportFragmentManager().beginTransaction();

trans.setCustomAnimations(R.anim.flip_right_in, R.anim.flip_right_out, 
                           R.anim.flip_left_in, R.anim.flip_left_out);
trans.addToBackStack(null);

trans.replace(R.id.content_frame, new MyFragment()).commit();

Answer

Anup Cowkur picture Anup Cowkur · Aug 27, 2013

You can use NineOldAndroids. It backports the Honeycomb (Android 3.0) animation API all the way back to Android 1.0. You'll get ObjectAnimator, ValueAnimator and all the other good stuff.