前言
前段时间在泡网上看到这个文章传送门，对于客户端开发而言，实现各种奇奇怪怪的UI效果也是常态，动画更是点睛之笔，这种小动画，可以使app灵动起来。刚看到这个效果的时候，就想到了layoutTransition，所以，趁着这个效果，来简单科普下。
原文章预期
效果图
感觉这个UI效果还是挺巧妙的，我的理解是让用户选择不同种类的食品，比如饮品，正餐，小吃等，组成一组“套餐”。
如果你看了原文章的话，你会发现原文作者使用了recyclerview+itemDecoration来实现。如果是我来实现的话，我不会选择recyclerview这种方法，一是：itemdecoration其实不好写，二，我固执的认为recyclerview应该使用在真的需要==recycle==的地方。
实现
实际上，大家可能也用过LayoutTransition，在你的viewgroup中写上这一句，就可以获得默认的一个添加、删除、移动子view的效果，具体表现为子view的alpha（透明度）变化，位置和大小渐变动画。
<LinearLayout
······
android:animateLayoutChanges="true">
如果对动画效果不在意的话，默认动画其实也能提高用户体验了，这里我们来简单看下如何实现文章中的动画效果。
使用shape作为viewgroup的背景，在viewgroup大小改变时，shape会自动填充。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="@color/colorDark" android:width="1dp"/>
<corners android:radius="100dp"/>
</shape>
添加子view动画
这里可以看到，添加子view就是透明度[0-1],然后逐渐左移进入的过程。
private Animator getInAnim() {
PropertyValuesHolder trX = PropertyValuesHolder.ofFloat("translationX",100f, 0f);
PropertyValuesHolder trY = PropertyValuesHolder.ofFloat("translationY",0f, 0f);
PropertyValuesHolder trAlpha = PropertyValuesHolder.ofFloat("alpha", 0f,1f);
return ObjectAnimator.ofPropertyValuesHolder(this,trY,trAlpha,trX);
}
删除子view，透明度[1-0],然后上移消失。
private Animator getOutAnim() {
PropertyValuesHolder trY2 = PropertyValuesHolder.ofFloat("translationY",0f, -100f);
PropertyValuesHolder trX = PropertyValuesHolder.ofFloat("translationX",0f, 0f);
PropertyValuesHolder trAlpha2 = PropertyValuesHolder.ofFloat("alpha",1f, 0f);
return ObjectAnimator.ofPropertyValuesHolder(this,trY2,trAlpha2,trX);
}
组合起来,我根据实际表现设置了下时长和延时。
private void initAnim() {
LayoutTransition mTransition = new LayoutTransition();
mTransition.setDuration(LayoutTransition.CHANGE_APPEARING,100);
mTransition.setDuration(LayoutTransition.CHANGE_DISAPPEARING,200);
mTransition.setDuration(LayoutTransition.APPEARING,200);
mTransition.setDuration(LayoutTransition.DISAPPEARING,100);
//-----------------------设置动画--------------------
mTransition.setAnimator(LayoutTransition.APPEARING,getInAnim());
mTransition.setAnimator(LayoutTransition.DISAPPEARING,getOutAnim());
//---------------------------------------------------
mTransition.setStartDelay(LayoutTransition.CHANGE_APPEARING,0);
mTransition.setStartDelay(LayoutTransition.APPEARING,0);
mTransition.setStartDelay(LayoutTransition.DISAPPEARING,0);
mTransition.setStartDelay(LayoutTransition.CHANGE_DISAPPEARING,50);
//----viewgroup绑定----
iconGroup.setLayoutTransition(mTransition);
}
结果
image
好像有点快，无所谓了。
了解了layoutTransition后，以后需要这类==布局动画==的UI效果也可以优先考虑了/(ㄒoㄒ)/~~
