LayoutTransition布局动画简单使用

前言

前段时间在泡网上看到这个文章传送门，对于客户端开发而言，实现各种奇奇怪怪的UI效果也是常态，动画更是点睛之笔，这种小动画，可以使app灵动起来。刚看到这个效果的时候，就想到了layoutTransition，所以，趁着这个效果，来简单科普下。

原文章预期

效果图

感觉这个UI效果还是挺巧妙的，我的理解是让用户选择不同种类的食品，比如饮品，正餐，小吃等，组成一组“套餐”。

如果你看了原文章的话，你会发现原文作者使用了recyclerview+itemDecoration来实现。如果是我来实现的话，我不会选择recyclerview这种方法，一是：itemdecoration其实不好写，二，我固执的认为recyclerview应该使用在真的需要==recycle==的地方。

实现

实际上，大家可能也用过LayoutTransition，在你的viewgroup中写上这一句，就可以获得默认的一个添加、删除、移动子view的效果，具体表现为子view的alpha（透明度）变化，位置和大小渐变动画。

如果对动画效果不在意的话，默认动画其实也能提高用户体验了，这里我们来简单看下如何实现文章中的动画效果。

使用shape作为viewgroup的背景，在viewgroup大小改变时，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ㄒ)/~~