apis < 3.0上的android翻转卡动画不翻转答案

【问题标题】：android Flip Card Animation on apis < 3.0 not fliping backapis < 3.0上的android翻转卡动画不翻转
【发布时间】：2013-12-21 22:31:37
【问题描述】：

我正在尝试为我的启动画面制作翻转卡片动画。我已将屏幕垂直分成 3 个部分，并尝试将它们翻转为 Front - Back (Pause for a second) - Front

我发现了一个很好的问题here，它帮助我弄清楚了 Front - Back 部分，但无论我做什么，我都无法将它们翻转回来。我是动画新手，所以请帮助我！谢谢！

FlipAnimation.java

public class FlipAnimation extends Animation {

private Camera camera;

private View fromView;
private View toView;

private float centerX;
private float centerY;

private boolean forward = true;

/**
 * Creates a 3D flip animation between two views.
 * 
 * @param fromView
 *            First view in the transition.
 * @param toView
 *            Second view in the transition.
 */

public FlipAnimation(View fromView, View toView) {
    this.fromView = fromView;
    this.toView = toView;

    setDuration(1500);
    setFillAfter(false);
    setInterpolator(new AccelerateDecelerateInterpolator());
}

public void reverse() {
    forward = false;
    View switchView = toView;
    toView = fromView;
    fromView = switchView;
}

@Override
public void initialize(int width, int height, int parentWidth,
        int parentHeight) {
    super.initialize(width, height, parentWidth, parentHeight);
    centerX = width / 2;
    centerY = height / 2;
    camera = new Camera();
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
    // Angle around the y-axis of the rotation at the given time
    // calculated both in radians and degrees.
    final double radians = Math.PI * interpolatedTime;
    float degrees = (float) (180.0 * radians / Math.PI);

    // Once we reach the midpoint in the animation, we need to hide the
    // source view and show the destination view. We also need to change
    // the angle by 180 degrees so that the destination does not come in
    // flipped around
    if (interpolatedTime >= 0.5f) {
        degrees -= 180.f;
        fromView.setVisibility(View.GONE);
        toView.setVisibility(View.VISIBLE);
    }

    if (forward)
        degrees = -degrees; // determines direction of rotation when flip
                            // begins

    final Matrix matrix = t.getMatrix();
    camera.save();
    camera.translate(0, 0, Math.abs(degrees) * 2);
    camera.getMatrix(matrix);
    camera.rotateY(degrees);
    camera.getMatrix(matrix);
    camera.restore();
    matrix.preTranslate(-centerX, -centerY);
    matrix.postTranslate(centerX, centerY);

}
}

SplashActivity.java

public class SplashActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.splash);


    flipCard1();
    flipCard2();
    flipCard3();
    flipBack1();
    flipBack2();
    flipBack3();

}


private void flipCard1() {

    Log.i("Debug_Tag", "Inside flipCard1");

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace1 = (View) findViewById(R.id.main_activity_card_face1);
    View cardBack1 = (View) findViewById(R.id.main_activity_card_back1);

    FlipAnimation flipAnimation1 = new FlipAnimation(cardFace1, cardBack1);

    if (cardFace1.getVisibility() == View.GONE) {

        flipAnimation1.reverse();

    }
    rootLayout.startAnimation(flipAnimation1);

}

private void flipCard2() {

    View rootLayout = (View) findViewById(R.id.main_activity_root2);
    View cardFace2 = (View) findViewById(R.id.main_activity_card_face2);
    View cardBack2 = (View) findViewById(R.id.main_activity_card_back2);

    FlipAnimation flipAnimation2 = new FlipAnimation(cardFace2, cardBack2);

    if (cardFace2.getVisibility() == View.GONE) {
        flipAnimation2.reverse();
    }

    rootLayout.startAnimation(flipAnimation2);

}

private void flipCard3() {
    View rootLayout = (View) findViewById(R.id.main_activity_root3);
    View cardFace3 = (View) findViewById(R.id.main_activity_card_face3);
    View cardBack3 = (View) findViewById(R.id.main_activity_card_back3);

    FlipAnimation flipAnimation3 = new FlipAnimation(cardFace3, cardBack3);

    if (cardFace3.getVisibility() == View.GONE) {
        flipAnimation3.reverse();
    }
    rootLayout.startAnimation(flipAnimation3);

}

private void flipBack1() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace1 = (View) findViewById(R.id.main_activity_card_face1);
    View cardBack1 = (View) findViewById(R.id.main_activity_card_back1);

    FlipAnimation flipBackAnimation11 = new FlipAnimation(cardBack1,
            cardFace1);

    if (cardBack1.getVisibility() == View.GONE) {
        flipBackAnimation11.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation11);

}

private void flipBack2() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace2 = (View) findViewById(R.id.main_activity_card_face2);
    View cardBack2 = (View) findViewById(R.id.main_activity_card_back2);

    FlipAnimation flipBackAnimation22 = new FlipAnimation(cardBack2,
            cardFace2);

    if (cardBack2.getVisibility() == View.GONE) {
        flipBackAnimation22.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation22);

}

private void flipBack3() {

    View rootLayout = (View) findViewById(R.id.main_activity_root1);
    View cardFace3 = (View) findViewById(R.id.main_activity_card_face3);
    View cardBack3 = (View) findViewById(R.id.main_activity_card_back3);

    FlipAnimation flipBackAnimation33 = new FlipAnimation(cardBack3,
            cardFace3);

    if (cardBack3.getVisibility() == View.GONE) {
        flipBackAnimation33.reverse();
    }

    rootLayout.startAnimation(flipBackAnimation33);

}

}

splash.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_activity_rootMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<RelativeLayout
    android:id="@+id/main_activity_root1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

</RelativeLayout>

【问题讨论】：

标签： android animation splash-screen

【解决方案1】：

要在3.0以下的平台实现翻牌动画，可以这样做：

在drawable文件夹中添加两个drawable

front.png
back.png

活动（SplashActivity.java）

public class SplashActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);

        flipCard(R.id.main_activity_root1, R.id.main_activity_card_face1,
                R.id.main_activity_card_back1);
        flipCard(R.id.main_activity_root2, R.id.main_activity_card_face2,
                R.id.main_activity_card_back2);
        flipCard(R.id.main_activity_root3, R.id.main_activity_card_face3,
                R.id.main_activity_card_back3);
    }

    private void flipCard(int idRootLayout, int idCardFace, int idCardBack) {

        final View rootLayout = (View) findViewById(idRootLayout);
        final View cardFace = (View) findViewById(idCardFace);
        final View cardBack = (View) findViewById(idCardBack);

        FlipAnimation flipAnimation1 = new FlipAnimation(cardFace, cardBack);
        AnimationListener flipAnimation1Listener = new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                cardBack.setVisibility(View.VISIBLE);
                cardFace.setVisibility(View.VISIBLE);
                FlipAnimation f = new FlipAnimation(cardFace, cardBack);
                f.reverse();
                rootLayout.startAnimation(f);
            }
        };
        flipAnimation1.setAnimationListener(flipAnimation1Listener);
        rootLayout.startAnimation(flipAnimation1);

    }
}

动画 (FlipAnimation.java)

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class FlipAnimation extends Animation {

    private Camera camera;
    private View fromView;
    private View toView;
    private float centerX;
    private float centerY;
    private boolean forward = true;

    public FlipAnimation(View fromView, View toView) {
        this.fromView = fromView;
        this.toView = toView;

        setDuration(1500);
        setFillAfter(false);
        setInterpolator(new AccelerateDecelerateInterpolator());
    }

    public void reverse() {
        forward = false;
        View switchView = toView;
        toView = fromView;
        fromView = switchView;
    }

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        centerX = width / 2;
        centerY = height / 2;
        camera = new Camera();
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final double radians = Math.PI * interpolatedTime;
        float degrees = (float) (180.0 * radians / Math.PI);

        if (interpolatedTime >= 0.5f) {
            degrees -= 180.f;
            fromView.setVisibility(View.GONE);
            toView.setVisibility(View.VISIBLE);
        }

        if (forward)
            degrees = -degrees;

        final Matrix matrix = t.getMatrix();
        camera.save();
        camera.translate(0, 0, Math.abs(degrees) * 2);
        camera.getMatrix(matrix);
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);

    }
}

XML 布局 (splash.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_activity_rootMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/transparent" >

<RelativeLayout
    android:id="@+id/main_activity_root1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back2"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/main_activity_root3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <RelativeLayout
        android:id="@+id/main_activity_card_face3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/front"
        android:clickable="true"
        android:onClick="onCardClick"
        android:padding="5dp" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_activity_card_back3"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/back"
        android:clickable="true"
        android:onClick="onCardClick"
        android:visibility="gone" >
    </RelativeLayout>
</RelativeLayout>

</RelativeLayout>

Attribution: XML 和 Animation java 文件来自the question

【讨论】：

完美运行！谢谢你:)

【解决方案2】：

我认为最好使用 xml 来使用动画。您需要在“res”中创建一个名为“anim”的新文件夹然后创建一个名为 flip.xml 的 xml 文件并添加以下代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_interpolator" >

    <!-- Shrinks the image from the left towards the right. -->
    <scale
        android:duration="200"
        android:fromXScale="0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>

这将创建一个翻转动画，你也可以根据你的要求修改它。要使用它你必须这样做

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.flip);
ImageView imageView;
imageView.startAnimation(animation) ;

您可以使用任何类型的视图来应用此动画。

希望这会有所帮助。

【讨论】：

这无疑是一种简单而甜蜜的方式.. 但并没有达到我真正需要的效果！ :)