<强>前言
面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,你弄啥咧? !
"哥哥我做不到啊.....啊.....呸”,做为一名有节操的程序猿,自然是不能说出这么没有出息的话,哥就满足你们,于是,出了个可自定义动效的卡片切换视图,效果如下所示
<>强思路
首先,要展示出卡片层叠的视觉效果。在这里,我们通过方块的缩放大小差异以及在Y方向上的位置差异,来展现这种视觉效果。
其次,要能够方便的定义卡片视图内容。我们通过都很熟悉的设置适配器的方式来构建内容视图。
最后,要能够自定义动效。我们通过定义一个由0到1的ValueAnimator,即每个动画的过程,其实就是该ValueAnimator在一个动画周期内,从0变化到1的过程,0表示动画刚开始,1表示动画结束了,0.5则表示这一轮动画已经执行到了一半。这样,通过转换器以及插值器,我们就可以根据ValueAnimator实时的值,来设置当前正在执行动画的卡片应该有的“样子”。
<强>总览
我们给出三种基本的动画模式
/*
* ANIM_TYPE_FRONT:被选中的卡片通过自定义动效移至第一,其他的卡片通过通用动效补位
* ANIM_TYPE_SWITCH:选中的卡片和第一张卡片互换位置,并都是自定义动效
* ANIM_TYPE_FRONT_TO_LAST:第一张图片通过自定义动效移至最后,其他卡片通过通用动效补位
*/公共静态最终int ANIM_TYPE_FRONT=0, ANIM_TYPE_SWITCH=1, ANIM_TYPE_FRONT_TO_LAST=2;
并通过辅助类来处理所有的动画逻辑,以及适配器来生成卡片视图
私人CardAnimationHelper mAnimationHelper;
私人BaseAdapter mAdapter;
在onMeasure时根据卡片宽高比来设置卡片的尺寸,在此请注意,当前情况下卡片宽度与整体容器宽度一致,后续通过自定义的方式,通过缩放来产生卡片的视觉效果。
私人浮动mCardRatio=CARD_SIZE_RATIO;//宽高比:卡片高/卡片宽
私人int mCardWidth mCardHeight;//卡片宽高
@Override
保护空白>//卡片列表
私人LinkedListmCards;//当前正在向后以及向前移动的卡片
私人CardItem mCardToBack mCardToFront;//正在向后以及向前移动卡片的位置
私人int mPositionToBack=0, mPositionToFront=0;//动画运行的ValueAnimator
私人ValueAnimator mValueAnimator;//当前的动画系数
私人浮动mCurrentFraction=1;
…//以及一系列的转换器与插值器
<强>细节
那么,动画到底是如何实现的,以及如何自定义的呢,我们以通用动画为例,来看看动画的主要流程
首先,在ValueAnimator更新的时候,获得当前的动画系数,依次来执行动画
/* *
* ValueAnimator动画更新
*/@Override
公共空间>/* *
*执行通用动画
*/私人空间doAnimationCommon(分数浮动,浮动fractionInterpolated) {//如果当前动画模式为选中的卡片移到最前
如果(mAnimType==InfiniteCardView.ANIM_TYPE_FRONT) {//则遍历在选中卡片之前的卡片
for (int i=0;我& lt;mPositionToFront;我+ +){
CardItem卡=mCards.get(我);//对卡片执行动画,从当前位置移动到后一个位置
doAnimationCommonView(卡。看来,分数,fractionInterpolated,我,我+ 1);
…
}
}……
}
最后,通过转换器,对卡片进行自定义动画处理
/* *
*对视图执行通用动画
* @param视图卡片视图
* @param fromPosition从该位置
* @param toPosition移动到该位置
*/私人空间doAnimationCommonView(视图查看、浮动分数fractionInterpolated浮动,int
fromPosition int toPosition) {//通用转换器转换动画
mTransformerCommon。transformAnimation(查看、分数mCardWidth
mCardHeight、fromPosition toPosition);
如果(mAnimInterpolator !=null) {//通用转换器转换插值动画
mTransformerCommon。transformInterpolatedAnimation(查看、fractionInterpolated mCardWidth、mCardHeight fromPosition, toPosition);
}
}
而转换器的具体实现则以DefaultCommonTransformer为例
