Android动画之翻页

以下内容来自Android Training，本人在此基础上作一些个人实践和记录，以便参考

翻页效果如下：

card_flip by keith

使用场景

一般页面的切换，或者View的切换

实现步骤

1. 创建Animators
2. 创建Views
3. 执行动画

详细过程：
**1. 创建Animators **

// res/animator/card_flip_left_in.xml
<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_left_out.xml,card_flip_right_in,card_flip_right_out, 类似.

2. 创建Views
这个比较简单，可以通过创建几个xml布局文件，然后再建立几个fragment来加载

3. 执行动画
以fragment的切换为例，调用FragmentTransaction的setCustomAnimations(int enter, int exit,int popEnter, int popExit)方法,将定义好的动画资源传进去(注意参数)，然后就可以进行正常添加和弹出了，部分代码如下：

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

// 弹出
getFragmentManager().popBackStack();

Notice

• 关于rotationY的方向问题，valueTo减去valueFrom的结果大于0则是逆时针，否则顺时针

Reference

1. Displaying Card Flip Animations