Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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();
like image 349
Philipp Jahoda Avatar asked Aug 27 '13 13:08

Philipp Jahoda


2 Answers

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.

like image 199
Anup Cowkur Avatar answered Oct 09 '22 22:10

Anup Cowkur


Thank you all for your help.

I managed to solve my problem. The solution has to do with NineOldAndroids and another Library with support-v4 support for NineOldAndroids.

What I did:

  • I downloaded this library: https://github.com/kedzie/Support_v4_NineOldAndroids (This is a support library for NineOldAndroids)
  • Imported it into my workspace
  • Downloaded the NineOldAndroids Library and imported it into my workspace
  • Imported the NineOldAndroids library into the support-v4 Library
  • Imported the support-v4-nineoldandroids library into my project
  • Did the Filp-Animation
like image 42
Philipp Jahoda Avatar answered Oct 09 '22 23:10

Philipp Jahoda