I am trying to move from one Fragment to another with performing a 3D flip animation. To accomplish this, I am trying to adapt the Google tutorial here to my context. The only thing is that the guide implement both Fragments in an Activity while I implement the Fragments separately in two files without relying on Activity.
The issue I am encountering is the following runtime exception whenever I try to animate the transition:
java.lang.RuntimeException: Unknown animation name: objectAnimator
Here is the approach I followed:
1- In build.gradle file, the minimum SDK supported version is 14:
android {
compileSdkVersion 23
buildToolsVersion "23.0.0"
defaultConfig {
applicationId "com.xxxxx.xxxxxxxx"
minSdkVersion 14
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
2- Under the res folder, I created a new Android resource directory anim:
The following is the code of the 4 xml files:
card_flip_left_in.xml:
<!-- Rotate. -->
<objectAnimator
android:valueFrom="-180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
card_flip_left_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_right_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" />
<!-- Rotate. -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
card_flip_right_out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="-180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" />
<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
Now come the interesting part, I try to perform the transition whenever on click on the marker info window:
@Override
public void onInfoWindowClick(Marker marker) {
System.out.println(marker.getId());
flipCard();
}
And the flipCard code:
private void flipCard() {
if (mShowingBack) {
getFragmentManager().popBackStack();
return;
}
// Flip to the back.
mShowingBack = true;
// Create and commit a new fragment transaction that adds the fragment for the back of
// the card, uses custom animations, and is part of the fragment manager's back stack.
getFragmentManager()
.beginTransaction()
// Replace the default fragment animations with animator resources representing
// rotations when switching to the back of the card, as well as animator
// resources representing rotations when flipping back to the front (e.g. when
// the system Back button is pressed).
.setCustomAnimations(
R.anim.card_flip_right_in , R.anim.card_flip_right_out,
R.anim.card_flip_left_in, R.anim.card_flip_left_out
)
// Replace any fragments currently in the container view with a fragment
// representing the next page (indicated by the just-incremented currentPage
// variable).
.replace(R.id.audio_playback, new AudioPlayback())
// Add this transaction to the back stack, allowing users to press Back
// to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit();
}
One of the attempts I tried:
I tried to move all the card animation xml files to an animator resource directory instead of an anim directory. But then whenever I change the path in the transition code to the following:
.setCustomAnimations(
R.animator.card_flip_right_in , R.animator.card_flip_right_out,
R.animator.card_flip_left_in, R.animator.card_flip_left_out
)
I got the statements above underlined in red with an error Expected resource of type anim. So this is to confirm this attempt doesn't seems to fix the issue.
So basically, how is the flip animation should be done? What I am missing here?
