布局动画就是在给ViewGroup增加子View的动画过度效果。
最简单的布局动画就是在ViewGroup的XML中打开一个系统默认的效果
android:animateLayoutChanges="true"
还可以通过LayoutAnimationController实现自定义子view的过渡效果
LayoutAnimationController 第一个参数是需要的动画,第二个参数是每个子View显示的delay时间,若时间不为0,还可以setOrder设置子View的显示顺序:
- LayoutAnimationController.ORDER_NORMAL:顺序
- LayoutAnimationController.ORDER_RANDOM:随机
- LayoutAnimationController.ORDER_REVEESE:反序
这里知识点简单,还是代码学习一下:
首先来一个动画的xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:duration="300"
android:fromAlpha="0"
android:toAlpha="1" />
<translate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:duration="300"
android:fromXDelta="0"
android:fromYDelta="300"
android:toXDelta="0"
android:toYDelta="0" />
</set>
这里关注一下:
translate 的 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
可以学习一下插值器
属性 | 描述 |
---|---|
@android:anim/linear_interpolator | 动画一直在做匀速改变 默认 |
@android:anim/accelerate_interpolator | 动画一在开始的地方开始较慢,然后开始加速 |
@android:anim/decelerate_interpolator | 在动画开始的地方改变速度较快,然后开始减速 |
@android:anim/accelerate_decelerate_interpolato | 动画在开始和结束的地方改变速度较慢,在中间的时候加速 |
@android:anim/cycle_interpolator | 动画循环播放特定的次数,变化速度按正弦曲线改变 |
@android:anim/bounce_interpolator | 动画结束的地方采用弹球效果 |
@android:anim/anticipate_overshoot_interpolator | 在动画开始的地方先向后退一小步,再开始动画,到结束的地方再超出一小步,最后回到动画结束的地方 |
@android:anim/overshoot_interpolator | 动画快速到达终点,并超出一小步最后回到动画结束的地方 |
@android:anim/anticipate_interpolator | 在动画开始的地方先向后退一小步,再快速到达动画结束的地方 |
布局文件:简单粗暴,放置一些子View
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zx.matrix.layoutanimdemo.MainActivity">
<LinearLayout
android:orientation="vertical"
android:id="@+id/ll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="28sp" />
</LinearLayout>
</LinearLayout>
MainActivity:
package com.zx.matrix.layoutanimdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
Animation animation = AnimationUtils.loadAnimation(this,R.anim.layout_anim);
LayoutAnimationController lac = new LayoutAnimationController(animation, 0.5F);
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
//为ViewGroup设置布局动画
ll.setLayoutAnimation(lac);
}
}
使用动画加载器 加载的动画设置给布局动画控制器。
对应设置不同的动画xml,就可以实现不同的布局动画子View 的过度效果了。
最后实现效果:
gif 效果不是很完美,真机运行很完美。