#Android学习#Animation之布局动画

上次简单介绍了Animation的使用，那是通过点击button，触发动画效果，比如旋转按钮。这次学习的Animation主要是用于布局，即layout中的动画效果，比如LinearLayout里面，TextView空间出现时的动画效果。控制layout中的动画效果，主要是利用LayoutAnimationController和setLayouAnimation来实现。我们先介绍Animation在布局中的使用，最后以RecylerView为例，实现每个item出现时是从右往左移动过来。

LinearLayou中的Animation

新建一个Android Studio Project（选择默认，直接下一步即可），首先，我们在content_main.xml 中添加几个TextView（其他控件也可以，比如Button），每个TextView中设置text为One、Two、Three。

//content_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.cyfloel.learnlayoutanimation.MainActivity"
    android:animateLayoutChanges="true"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Three" />
LinearLayout>

在MainAcitivity 的onCreate 函数中添加下面代码

// MainActivity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /**
        * 简单布局动画，布局里面空间显示时以缩放效果出现
        */
        linearLayout = (LinearLayout) findViewById(R.id.container);
        // 缩放动画效果
        ScaleAnimation sa = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(1000);
        // 第二个参数为delay，如果为0，则所有TextView同时出现
        // @param delay the delay by which each child's animation must be offset
        lac = new LayoutAnimationController(sa, 0.5f);
        linearLayout.setLayoutAnimation(lac); 
    }

在真机或者模拟器中，运行则可以看到显示效果。接下来，我们实现RecyclerView中Item出现时的动画效果，RecyclerView可以通过两种方法来生成——代码动态生成和在layout中使用RecyclerView标签生成。同样的布局的Animation也有两种形式，代码和资源文件，下面我们讲分别介绍通过代码动态生成动画效果，以及通过RecyclerView标签和资源文件实现动画效果。

RecyclerView中Item出现的动画效果——通过代码动态生成RecycleView和动画效果

RecyclerView的使用可以参考以前的文章RecyclerView基础，这里不再介绍RecyclerView的使用。同样新建一个Android Studio Project。我们把自动生成的content_main.xml 中的TextView 控件删除，将布局改为LinearLayout，然后保存（可不做更改，个人喜好而已）

// content_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.cyfloel.learnlayoutanimation.MainActivity"
    android:animateLayoutChanges="true"
    tools:showIn="@layout/activity_main">
LinearLayout>

然后在MainAcitivty中添加以下代码

// MainActivity
     @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /**
        * 新建RecyclerView
        * 设置RecyclerView中的布局，如LinearLayout或GridLayout
        * 同时设置里面显示的内容Adapter
        * 将RecyclerView添加到根布局中
        */
        linearLayout = (LinearLayout) findViewById(R.id.container); 
        RecyclerView recycler = new RecyclerView(this);
        recycler.setLayoutManager(new LinearLayoutManager(this));
        recycler.setAdapter(new MyAdapter());
        linearLayout.addView(recycler);

        /**
        * 设置RecyclerView中Item出现时的动画效果
        * 这里设置每个Item出现时，都是从右到左移动出现
        * 且每个item都是相继出现
        */
        TranslateAnimation ta = new TranslateAnimation(200,0,0,0);
        ta.setDuration(1000);
        LayoutAnimationController recyclerLac = new LayoutAnimationController(ta, 0.5f);
        recycler.setLayoutAnimation(recyclerLac);
    }

通过上面的代码可以看出，相对前面提到的LinearLayout的布局动画，这里是将linearLayout.setLayoutAnimation 改为了 recycler.setLayoutAnimation，使用差别不大。

RecyclerView中Item出现的动画效果——通过资源文件实现

接下来我们使用资源文件来实现类似上面的动画效果。通过这种方法，可以将视图单独出来。
同样新建一个Android Studio Project，在自动生成的contain_main.xml 中添加RecyclerView，并将根布局改为LinearLayout

//content_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.cyfloel.learnlayoutanimation.MainActivity"
    android:animateLayoutChanges="true"
    tools:showIn="@layout/activity_main">

    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewResource"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layoutAnimation="@anim/rotate_control">
    android.support.v7.widget.RecyclerView>
LinearLayout>

在MainActivity中的onCreate函数汇总添加如下代码

// MainActivity
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        /**
        * 找到RecyclerView的布局
        * 设置Adapter
        * 动画效果在资源文件中实现
        */
        RecyclerView recyclerViewResource = (RecyclerView) findViewById(R.id.recyclerViewResource);
        recyclerViewResource.setLayoutManager(new LinearLayoutManager(this));
        recyclerViewResource.setAdapter(new MyAdapter());

    }

在anim文件夹下，添加两个资源文件，其中一个是动画效果，另一个是控制动画效果的文件（这里采用旋转动画效果，要替换成其他动画效果也很简单，修改rotate_rec.xml 这个文件就可以了）

旋转动画资源文件

// rotate_rec.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000">
rotate>

动画控制器文件

// rotate_control.xml

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/rotate_rec"
    android:delay="0.5">
layoutAnimation>

注意上面代码，android:animation中的值是动画资源，android:delay 的值是延迟的大小
上面contain_main.xml中提到，要注意RecyclerView中有个属性android:layoutAnimation="@anim/rotate_control" ，layoutAnimation的值就是动画的控制器，在布局文件中设置这个属性，即可通过animation的资源文件来实现动画效果。
今天的介绍就到这里。
（PS. 使用资源文件的时候，要注意代码的大小写，多利用代码提示的功能）