Android Animation学习(五) ApiDemos解析:容器布局动画 LayoutTransition
Android Animation学习(五) ApiDemos解析:容器布局动画 LayoutTransition
Property animation系统还提供了对ViewGroup中的View改变加入动画的功能。
你可以使用 LayoutTransition
对ViewGroup中的View改变进行动画显示。
注意,本文所说的动画效果都是设置给容器(ViewGroup),然而效果是通过容器存放的View来体现的。
四种容器转换动画类型
当你添加或者移除ViewGroup中的View时,或者你调用View的setVisibility()方法来控制其显示或消失时,就处于一个转换状态。这种事件就有可能会激发动画。
当前被增加或者移除的View可以经历一个出现的动画或者一个消失的动画。
而且不止是当前要控制的View,ViewGroup中的其他View也可以随之进行变动,比如经历一个动画移动到新的位置。
所以一共有四种相关的动画类型:
1.View本身的出现动画;
2.消失动画;
3.由于新增了其他View而需要改变位置的动画;
4.由于移除了其他View而需要改变位置的动画。
(如果增加或移除了其他View之后,当前View的位置不需要改变,则无动画)。
你可以自定义这些动画,通过setAnimator() 方法把它们设置进一个 LayoutTransition
对象中去。
设置的时候需要一个 Animator 对象和一个常数:
APPEARING - A flag indicating the animation that runs on items that are appearing in the container.
CHANGE_APPEARING - A flag indicating the animation that runs on items that are changing due to a new item appearing in the container.
DISAPPEARING - A flag indicating the animation that runs on items that are disappearing from the container.
CHANGE_DISAPPEARING - A flag indicating the animation that runs on items that are changing due to an item disappearing from the container.
你可以自己定义这四种事件类型的动画,也可以使用默认的动画。
最后通过setLayoutTransition(LayoutTransition)
方法把这些动画以一个 LayoutTransition
对象的形式设置给一个ViewGroup即可。
比如下面这个方法就生成了一个全新的LayoutTransition对象并set给容器(ViewGroup类型),这样四个动画就全是默认动画。
// 重新生成LayoutTransition对象并设置给container private void resetTransition() { mTransitioner = new LayoutTransition(); container.setLayoutTransition(mTransitioner); }
为这个mTransitioner对象生成四个自定义动画:
// 生成自定义动画 private void setupCustomAnimations() { // 动画:CHANGE_APPEARING // Changing while Adding PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 1); PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 1); PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right", 0, 1); PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom", 0, 1); PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f); PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f); final ObjectAnimator changeIn = ObjectAnimator.ofPropertyValuesHolder( this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhScaleX, pvhScaleY).setDuration( mTransitioner.getDuration(LayoutTransition.CHANGE_APPEARING)); mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, changeIn); changeIn.addListener(new AnimatorListenerAdapter() { public void onAnimationEnd(Animator anim) { View view = (View) ((ObjectAnimator) anim).getTarget(); view.setScaleX(1f); view.setScaleY(1f); } }); // 动画:CHANGE_DISAPPEARING // Changing while Removing Keyframe kf0 = Keyframe.ofFloat(0f, 0f); Keyframe kf1 = Keyframe.ofFloat(.9999f, 360f); Keyframe kf2 = Keyframe.ofFloat(1f, 0f); PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe( "rotation", kf0, kf1, kf2); final ObjectAnimator changeOut = ObjectAnimator .ofPropertyValuesHolder(this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhRotation) .setDuration( mTransitioner .getDuration(LayoutTransition.CHANGE_DISAPPEARING)); mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changeOut); changeOut.addListener(new AnimatorListenerAdapter() { public void onAnimationEnd(Animator anim) { View view = (View) ((ObjectAnimator) anim).getTarget(); view.setRotation(0f); } }); // 动画:APPEARING // Adding ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "rotationY", 90f, 0f).setDuration( mTransitioner.getDuration(LayoutTransition.APPEARING)); mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn); animIn.addListener(new AnimatorListenerAdapter() { public void onAnimationEnd(Animator anim) { View view = (View) ((ObjectAnimator) anim).getTarget(); view.setRotationY(0f); } }); // 动画:DISAPPEARING // Removing ObjectAnimator animOut = ObjectAnimator.ofFloat(null, "rotationX", 0f, 90f).setDuration( mTransitioner.getDuration(LayoutTransition.DISAPPEARING)); mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animOut); animOut.addListener(new AnimatorListenerAdapter() { public void onAnimationEnd(Animator anim) { View view = (View) ((ObjectAnimator) anim).getTarget(); view.setRotationX(0f); } }); }
默认的布局转换动画
如果你要使用默认的动画,一个非常简单的方式是在ViewGroup的XML布局文件中把android:animateLayoutchanges
属性设置为true。
这样就自动地按照默认方式来对要移除或添加的View,还有Group中的其他View进行动画。
比如ApiDemos中的LayoutAnimationsByDefault:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <Button android:id="@+id/addNewButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Add Button" /> <!-- <GridLayout android:columnCount="4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/gridContainer" android:animateLayoutChanges="true" /> --> <LinearLayout android:id="@+id/gridContainer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical"> </LinearLayout> </LinearLayout>
我把布局改成了线性布局,只要是ViewGroup类型都可以。
默认情况下,DISAPPEARING和CHANGE_APPEARING动画是立即开始的,其他动画都有一个默认的开始延迟。
这是因为,比如:当一个新的View出现的时候,其他View要立即执行CHANGE_APPEARING动画腾出位置,而新出现的View在一定延迟之后再执行APPEARING出现;
相反地,一个View消失的时候,它需要先DISAPPEARING动画消失,而其他的View需要先等它消失后再执行CHANGE_DISAPPEARING。
当然这些默认的行为都可以通过 setDuration(int, long)
和setStartDelay(int, long)
等方法改变。
API Demos代码
ApiDemos中布局动画相关的类有:LayoutAnimationsByDefault 、LayoutAnimations、LayoutAnimationsHideShow。
完整的项目可以去github下载。https://github.com/mengdd/AnimationApiDemos
参考资料
API Guides: Property Animation
http://developer.android.com/guide/topics/graphics/prop-animation.html
其中的Animating Layout Changes to ViewGroups
LayoutTransition类Reference:
http://developer.android.com/reference/android/animation/LayoutTransition.html
项目地址:
https://github.com/mengdd/AnimationApiDemos