前言
前段时间在泡网上看到这个文章传送门,对于客户端开发而言,实现各种奇奇怪怪的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);
}复制代码
结果
好像有点快,无所谓了。
了解了layoutTransition
后,以后需要这类==布局动画==的UI效果也可以优先考虑了/(ㄒoㄒ)/~~