本文介绍如何是一个自定义的Fragment动画来制作卡片翻转动画。卡片翻转动画是在内容视图之间模拟卡片翻转的效果。
创建动画器
创建用于卡片翻转的动画，需要两个用于前景的动画器，它们会让卡片的前景向左侧退出，从左侧进入。还需要两个用于背景的动画器，它们会让卡片的背景从右侧进入，向右侧退出。
card_filp_left_in.xml
<setxmlns: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 throughthe 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_left_out.xml
<setxmlns: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 throughthe 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
<setxmlns: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 throughthe 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_right_out.xml
<setxmlns: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 throughthe 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>创建View
“卡片”每个面都是一个独立的布局，布局中可以包含任何你想要的内容，如文字、图像，或者是任意View的组合。然后，要在随后的Fragment动画中使用这两个布局。以下是创建了一个显示“卡片”文本面的布局：
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#a6c"
android:padding="16dp"
android:gravity="bottom">
<TextView android:id="@android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:textColor="#fff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_title" />
<TextView style="?android:textAppearanceSmall"
android:textAllCaps="true"
android:textColor="#80ffffff"
android:textStyle="bold"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_back_description" />
</LinearLayout>以下是显示“卡片”图片面的布局
<ImageViewxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image1"
android:scaleType="centerCrop"
android:contentDescription="@string/description_image_1" />创建Fragment
给“卡片”的前后两面创建Fragment类。这些Fragment类会在它的onCreateView()方法中返回你之前创建的布局。然后，在你要显示卡片的Activity中创建相应的Fragment类的实例。以下实例说明了嵌入到它的父Activity内部的Fragment类的使用方法：
publicclassCardFlipActivityextendsActivity{
...
/**
* A fragment representing the front of thecard.
*/
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 thecard.
*/
public class CardBackFragment extends Fragment {
@Override
public View onCreateView(LayoutInflaterinflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_card_back,container, false);
}
}
}让卡片翻转
现在，你需要在一个父Activity内显示Fragment。首先给你的Activity创建布局。下例中创建了一个可以在运行时添加Fragment的FrameLayout布局：
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />在Activity代码中，把内容视图设置给刚刚创建的布局。这也是创建Activity时，显示默认Fragment的好主意，因此下例会说明如何显示默认的“卡片”的前面：
publicclassCardFlipActivityextendsActivity{
@Override
protected void onCreate(BundlesavedInstanceState) {
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的回退堆栈中，以便在用户按下回退按钮时，该卡片会翻转返回。
privatevoid flipCard(){
if (mShowingBack) {
getFragmentManager().popBackStack();
return;
}
// Flip to the back.
mShowingBack = true;
// Create and commit a newfragment transaction that adds the fragment for the back of
// the card, uses customanimations, and is part of the fragment manager's back stack.
getFragmentManager()
.beginTransaction()
// Replace the default fragment animations with animator resourcesrepresenting
// rotations when switching to the back of the card, as well asanimator
// 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 afragment
// representing the next page (indicated by the just-incrementedcurrentPage
// variable).
.replace(R.id.container, new CardBackFragment())
// Add this transaction to the back stack, allowing users to pressBack
// to get to the front of the card.
.addToBackStack(null)
// Commit the transaction.
.commit();
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
