【Layout Animation 布局动画】

最新推荐文章于 2021-05-25 19:40:57 发布

原创最新推荐文章于 2021-05-25 19:40:57 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #布局 #动画

本文介绍如何在Android的ListView中实现不同类型的布局动画效果，包括渐现、放大、左右及底部飞入等。通过XML定义动画属性，结合Java代码实现动画播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 本文要完成的任务：

在类似ListView这种包含子view的控件上实现item动画效果

2、 效果展示图如下：

3、 任务具体实现：

1--->准备5种不同的动画xml文件

渐现动画文件layout_alpha.xml内容：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromAlpha="0.0"
    android:toAlpha="1.0">

<!-- duration 动画持续时间
	 fromAlpha 开始透明度值
	 toAlpha 结束透明度值  
         0表示完全透明  1表示完全不透明-->
</alpha>

放大动画文件layout_scale.xml内容：

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

    <!--
     duration 动画持续时间
	 fromXScale x方向上开始时候的大小
	 fromYScale y方向上开始时候的大小
	 pivotX  x方向上缩放的中心位置
	 pivotY  y方向上缩放的中心位置
	 toXScale x方向上结束时候的大小
	 toYScale y方向上结束时候的大小
    -->

</scale>

左边飞入动画layout _left_in_translate.xml内容：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="-300"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0" >
    </translate>

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>

</set>

右边飞入动画文件layout_right_in_translate.xml内容：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="300"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0" >
    </translate>

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>

</set>

底部飞入动画文件layout_bottom_in_translate.xml内容：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:fromYDelta="100"
        android:toXDelta="0"
        android:toYDelta="0" >
    </translate>

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>

</set>

2--->在java中获取ListView对象，并且向ListView中填充一些数据：

		listView = (ListView) findViewById(R.id.listView1);
		//设置listview的分隔部分为null
		listView.setDivider(null);

		/**
		 * 1.准备数据集合 2.准备适配器 3.视图加载适配器
		 */
		// 新建数据集合
		ArrayList<String> data = new ArrayList<String>();
		for (int i = 1; i <= 20; i++) {
			String s = "######第" + i + "行######";
			data.add(s);
		}
		// 新建适配器
		adapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, android.R.id.text1, data);

		// 视图加载适配器
		listView.setAdapter(adapter);

3--->构造布局动画并让ListView加载和播放：

	//播放布局动画
	private void playLayoutAnimation(int animId){
		// 新建布局动画控制器
		LayoutAnimationController lac = new LayoutAnimationController(
				AnimationUtils.loadAnimation(this, animId));
		//设置动画顺序
		lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
		//视图加载动画控制器
		listView.setLayoutAnimation(lac);
		//开始播放动画
		listView.startLayoutAnimation();
	}

4--->点击不同的按钮就可以播放不同的布局动画了：

		switch (v.getId()) {
		case R.id.button1:
			//放大出现
			playLayoutAnimation(R.anim.layout_scale);
			break;
		case R.id.button2:
			//左边飞入
			playLayoutAnimation(R.anim.layout_left_in_translate);
			break;
		case R.id.button3:
			//右边飞入
			playLayoutAnimation(R.anim.layout_right_in_translate);
			break;
		case R.id.button4:
			//底部飞入
			playLayoutAnimation(R.anim.layout_bottom_in_translate);
			break;

		default:
			break;
		}

03_Layout Animation 布局动画Demo下载