android 卡片三维旋转,Android Animations（三）：卡片翻转动画（Card Flip）

卡片翻转动画(Card Flip)

本篇博文将介绍如何实现卡片翻转(Card Flip)动画。 Card Flip 动画效果模拟卡片翻转，在两个视图之间进行切换。

实际效果请看下图：

创建新项目，并且在相应目录创建下列文件

src/CardFlipActivity.java

animator/card_flip_right_in.xml

animator/card_flip_right_out.xml

animator/card_flip_left_in.xml

animator/card_flip_left_out.xml

layout/fragment_card_back.xml

layout/fragment_card_front.xml

创建动画制作器(Animator) 为了创建 `Card Flip` 动画效果，需要两个动画制作器实现上面的卡片从左侧退出和进入，还需要两个动画制作器实现下面的卡片从右侧进入以及退出。

card_flip_left_in.xml

card_flip_left_out.xml

card_flip_right_in.xml

card_flip_right_out.xml

创建视图

卡片 的两面都有各自的布局，可以添加任何所需添加的内容，例如两个文本内容，两个图片，或者任何视图的组合。之后，将在Fragment 中使用两个布局文件。下面创建了卡片的一面，用来展示一些文本：

另一面通过ImageView 展示一幅图片

创建Fragment

为卡片的正反面创建Fragment ，每个Fragment都通过onCreateView() 方法返回刚刚创建的布局。然后通过创建Fragment 实例，在父Activity 中展示卡片。下面的代码将Fragment 嵌入到Activity 中：

public class CardFlipActivity extends Activity {

...

/** * A fragment representing the front of the card. */

public class CardFrontFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_card_front, container, false);

}

}

/** * A fragment representing the back of the card. */

public class CardBackFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_card_back, container, false);

}

}

}

实现卡片翻转效果

将Fragment添加到Activity中。创建Activity布局文件，将Fragment添加到其中：

在Activity中，将content view 设置为上面创建的布局文件。也可以在Activity被创建的时候通过Java代码添加Fragment。下面将在默认情况下展示上面的卡片。

public class CardFlipActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_activity_card_flip);

if (savedInstanceState == null) {

getFragmentManager()

.beginTransaction()

.add(R.id.container, new CardFrontFragment())

.commit();

}

}

...

}

默认情况下，上面的卡片显示在屏幕上，下面实现卡片翻转切换到下面的卡片。创建一个方法实现该功能：

1. 在Fragment切换前，设置自定义卡片翻转动画

2. 用新的Fragment替换当前显示的Fragment，并且使用之前创建的卡片翻转动画

3. 将之前展示的Fragment添加到Fragment返回栈中，当用户点击Back 按钮时，卡片重新翻转回来

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.animator.card_flip_right_in, R.animator.card_flip_right_out,

R.animator.card_flip_left_in, R.animator.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.container, new CardBackFragment())

// 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();

}