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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,589评论 2 45
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,687评论 25 708
  • 原文地址:http://www.android100.org/html/201606/06/241682.html...
    AFinalStone阅读 1,012评论 0 1
  • 残烛孤影床头梦, 几多忧愁少欢雀。 明月不愿人间悦, 一朝成圆又逢缺。
    雅俗共赏Y阅读 88评论 0 4
  • .今天我很伤心,因为没有人会理我,我的心中的话谁都不知道
    姚佳欣阅读 85评论 0 0