一)布局动画效果
既然一个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的渐变性是自定义动画的基础。
第三节学习了布局动画的创建和用法,方法都大同小异,可以举一反三来学习。