一)布局动画效果

既然一个View可以有动画效果,那么ViewGroup肯定也可以有动画效果,这里我们就以一个LinearLayout为例,来给这个布局创建动画效果。

在代码里和在资源文件里实现的效果是一样的

1)布局文件,很简单的一个布局,添加了一些按钮视图

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/layout"
    tools:context=".MainActivity">


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:id="@+id/button4" />


</LinearLayout>

2)在代码里为布局创建动画效果,通过LayoutAnimationController类来实现

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ScaleAnimation sa=new ScaleAnimation(0,1,0,1);//缩放动画效果
         sa.setDuration(2000);

        LayoutAnimationController lac=new LayoutAnimationController(sa,0.5f);//布局动画效果的参数
         lac.setAnimation(sa);
        lac.setOrder(LayoutAnimationController.ORDER_NORMAL); //显示的顺序

         LinearLayout layout= (LinearLayout) findViewById(R.id.layout);
        layout.setLayoutAnimation(lac);//给布局加载上动画效果
    }
}

最后运行的效果是按钮会连续按照缩放的效果出现,顺序是LayoutAnimationController.ORDER_NORMAL,就是正常从上到下的顺序,此外还可以设置反转和随意的顺序

3)在xml里实现

新建xml文件,类型为Animation,Root Element选择scale,命名为sa

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXScale="0"
     android:toXScale="1"
     android:fromYScale="0"
     android:toYScale="1"
     android:duration="2000">
    

</scale>

接着新建xml,还是Aniamtion类型,把标签改成layoutAnimation,命名为layout

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/sa"
    android:delay="0.5">
    </layoutAnimation>

最后在布局文件里添加下面一行

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layoutAnimation="@anim/layout"//创建布局动画
    >
.......
 </LinearLayout>

这样就完成了布局动画效果的创建了。

二)布局内容改变动画(animationLayoutChanges)

当我们在布局里进行一些操作时,比如增加按钮或者减掉按钮,会导致布局内容改变,使用这个animationLayoutChanges可以使布局内容改变的时候产生动画效果,改善用户体验。这里以菜单选项里增加按钮为例,可以看到这个动画的效果。

首先给菜单选项增加一个“添加”的选项,我们来新建一个menu类型的xml文件,icon指定了系统自带的一个添加菜单选项的图片

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.layoutchangeanimation.MainActivity" >

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:showAsAction="never"
        android:title="@string/action_settings"/>
    <item
        android:id="@+id/action_add"
        android:showAsAction="always"
        android:icon="@android:drawable/ic_input_add"
        android:title="@android:drawable/ic_input_add" />
    
</menu>

然后在代码里写这个添加选项的逻辑事件

public class MainActivity extends Activity {

	private LinearLayout rootView;
	private OnClickListener btn_onClickListener=new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			rootView.removeView(v);
		}
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		rootView=(LinearLayout)findViewById(R.id.rootView);
	}
	
	private void add() {
		Button btn=new Button(this);
		btn.setText("Remove me");
		rootView.addView(btn);
		btn.setOnClickListener(btn_onClickListener);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.action_settings:
			return true;
		case R.id.action_add:
			add();
			break;
		default:
			break;
		}
		return super.onOptionsItemSelected(item);
	}
}

可以看到,点击添加选项的时候会新建按钮,如果点击这个按钮,会将自身移除

接下来为这个布局设置布局内容改变动画,在布局文件里添加animationLayoutChanges属性为true:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/rootView"
    android:animateLayoutChanges="true"
    tools:context="com.example.layoutchangeanimation.MainActivity" >


</LinearLayout>

这样当布局内容改变的时候,就会有这个动画效果。

 三)为列表添加布局动画效果

既然可以给布局创建动画效果,那么给listView添加布局动画效果就是很简单了,而且方法和我们上面第一条的内容几乎是一样的

1)布局文件

<ListView android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  
</ListView>

2)代码里实现动画效果

public class MainActivity extends ListActivity {

	private ArrayAdapter<String> adapter;
	private LayoutAnimationController lac;
	private ScaleAnimation sa;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		adapter=new ArrayAdapter<String>(this, 
				android.R.layout.simple_list_item_1, 
				new String[]{"刘家威","祝你一帆风顺","人生得意须尽欢"});
		setListAdapter(adapter);
		
	          sa=new ScaleAnimation(0, 1, 0, 1);
		  sa.setDuration(2000);
		  lac=new LayoutAnimationController(sa, 0.5f);
		  getListView().setLayoutAnimation(lac);//给列表添加动画效果
	}
}

这样就实现动画效果了,如果想用资源文件的方法实现,只要新建好所有的anim.xml后,在布局里添加一行

android:layoutAnimation="@anim/name"

通过这三节连续的Android自定义视图动画的学习,深入了解了视图动画和布局动画的用法和效果

第一节是学习了四个基础动画,

旋转动画 rotateAnimation

透明动画 alphaAnimation

缩放动画 scaleAniamtion

移动动画 translateAnimation

第二节学习了混合动画效果和自定义动画效果的制作,自定义动画效果和applyTransformation(float interpolatedTime, Transformation t)密不可分,尤其是 interpolatedTime的渐变性是自定义动画的基础。

第三节学习了布局动画的创建和用法,方法都大同小异,可以举一反三来学习。