Android可自定义神奇动效的卡片切换视图实例

前⾔

⾯对众多卡⽚层叠效果，我们的产品童鞋也突发奇想，搞出了另⼀种卡⽚层叠切换展⽰的交互，⽽且产品狗们居然要求多做⼏种动效给他们看，好让他们选择，这简直就是要搞事情啊，what are you 弄啥咧？！

“哥哥我做不到啊.....啊.....呸”，做为⼀名有节操的程序猿，⾃然是不能说出这么没有出息的话，哥就满⾜你们，于是，出了个可⾃定义动效的卡⽚切换视图，效果如下所⽰

思路

⾸先，要展⽰出卡⽚层叠的视觉效果。在这⾥，我们通过⽅块的缩放⼤⼩差异以及在Y⽅向上的位置差异，来展现这种视觉效果。

其次，要能够⽅便的定义卡⽚视图内容。我们通过都很熟悉的设置Adapter的⽅式来构建内容视图。

最后，要能够⾃定义动效。我们通过定义⼀个由0到1的ValueAnimator，即每个动画的过程，其实就是该ValueAnimator在⼀个动画周期内，从0变化到1的过程，0表⽰动画刚开始，1表⽰动画结束了，0.5则表⽰这⼀轮动画已经执⾏到了⼀半。这样，通过转换器以及插值器，我们就可以根据ValueAnimator实时的值，来设置当前正在执⾏动画的卡⽚应该有的“样⼦”。总览

我们给出三种基本的动画模式

/*

* ANIM_TYPE_FRONT:被选中的卡⽚通过⾃定义动效移⾄第⼀，其他的卡⽚通过通⽤动效补位 * ANIM_TYPE_SWITCH:选中的卡⽚和第⼀张卡⽚互换位置，并都是⾃定义动效

* ANIM_TYPE_FRONT_TO_LAST:第⼀张图⽚通过⾃定义动效移⾄最后，其他卡⽚通过通⽤动效补位 */

public static final int ANIM_TYPE_FRONT = 0, ANIM_TYPE_SWITCH = 1, ANIM_TYPE_FRONT_TO_LAST = 2;

并通过Helper类来处理所有的动画逻辑，以及Adapter来⽣成卡⽚视图

private CardAnimationHelper mAnimationHelper;private BaseAdapter mAdapter;

在onMeasure时根据卡⽚宽⾼⽐来设置卡⽚的尺⼨，在此请注意，当前情况下卡⽚宽度与整体容器宽度⼀致，后续通过⾃定义的⽅式，通过缩放来产⽣卡⽚的视觉效果。

private float mCardRatio = CARD_SIZE_RATIO;//宽⾼⽐：卡⽚⾼ / 卡⽚宽private int mCardWidth, mCardHeight;//卡⽚宽⾼@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { ...

if (mCardWidth == 0 || mCardHeight == 0) { setCardSize(true); }}/*

* 根据卡⽚⽐例计算卡⽚宽⾼，并传⼊Helper */

private void setCardSize(boolean resetAdapter) { mCardWidth = getMeasuredWidth();

mCardHeight = (int) (mCardWidth * mCardRatio);

mAnimationHelper.setCardSize(mCardWidth, mCardHeight); mAnimationHelper.initAdapterView(mAdapter, resetAdapter);}

那么如此之后，⾃然Helper中就保存了视图的主要数据与参数

//卡⽚列表

private LinkedList mCards;//当前正在向后以及向前移动的卡⽚

private CardItem mCardToBack, mCardToFront;//正在向后以及向前移动卡⽚的位置

private int mPositionToBack = 0, mPositionToFront = 0;//动画运⾏的ValueAnimator

private ValueAnimator mValueAnimator;//当前的动画系数

private float mCurrentFraction = 1;...//以及⼀系列的转换器与插值器

细节

那么，动画到底是如何实现的，以及如何⾃定义的呢，我们以通⽤动画为例，来看看动画的主要流程⾸先，在ValueAnimator更新的时候，获得当前的动画系数，依次来执⾏动画

/**

* ValueAnimator动画更新 */

@Override

public void onAnimationUpdate(ValueAnimator animation) { //获取当前动画系数

mCurrentFraction = (float) animation.getAnimatedValue(); //通过插值器获取插值系数

fractionInterpolated = mAnimInterpolator.getInterpolation(mCurrentFraction); doAnimationCommon(mCurrentFraction, fractionInterpolated); ...}

接着，对需要执⾏动画的卡⽚，执⾏动画，以ANIM_TYPE_FRONT动画模式为例，当选中的卡⽚移动到最前的时候，原来在这张卡⽚之前的所有卡⽚，都要向后移动⼀位，来留出第⼀个的位置

/**

* 执⾏通⽤动画 */

private void doAnimationCommon(float fraction, float fractionInterpolated) { //如果当前动画模式为选中的卡⽚移到最前

if (mAnimType == InfiniteCardView.ANIM_TYPE_FRONT) { //则遍历在选中卡⽚之前的卡⽚

for (int i = 0; i < mPositionToFront; i++) { CardItem card = mCards.get(i);

//对卡⽚执⾏动画，从当前位置移动到后⼀个位置

doAnimationCommonView(card.view, fraction, fractionInterpolated, i, i + 1); ... } }...}

最后，通过转换器，对卡⽚进⾏⾃定义动画处理

/**

* 对视图执⾏通⽤动画

* @param view 卡⽚视图

* @param fromPosition 从该位置 * @param toPosition 移动到该位置 */

private void doAnimationCommonView(View view, float fraction, float fractionInterpolated, int fromPosition, int toPosition) { //通⽤转换器转换动画

mTransformerCommon.transformAnimation(view, fraction, mCardWidth, mCardHeight, fromPosition, toPosition); if (mAnimInterpolator != null) { //通⽤转换器转换插值动画

mTransformerCommon.transformInterpolatedAnimation(view, fractionInterpolated, mCardWidth,mCardHeight, fromPosition, toPosition); }}

⽽转换器的具体实现则以DefaultCommonTransformer为例

@Override

public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) { //需要跨越的卡⽚数量

int positionCount = fromPosition - toPosition;

//以0.8做为第⼀张的缩放尺⼨，每向后⼀张缩⼩0.1 //(0.8f - 0.1f * fromPosition) = 当前位置的缩放尺⼨

//(0.1f * fraction * positionCount) = 移动过程中需要改变的缩放尺⼨

float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount); ViewHelper.setScaleX(view, scale); ViewHelper.setScaleY(view, scale);

//在Y⽅向的偏移量，每向后⼀张，向上偏移卡⽚宽度的0.02 //-cardHeight * (0.8f - scale) * 0.5f 对卡⽚做整体居中处理

ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *

fromPosition - 0.02f * fraction * positionCount));}

对于向第⼀位移动的选中卡⽚，也是同理，只不过是根据该卡⽚对应的转换器来进⾏⾃定义动画的转换。最后的效果，就像演⽰图中第⼀次点击，图⽚向前翻转到第⼀位的效果⼀样。

对于产品狗突如其来的想法，咱们程序猿不善于⼝⽔仗的，就只能⽤代码来让他们来服⽓了。毕竟，⼤家还都是伐⽊累嘛，哈哈。

当实现某个东西遇到困难时，不妨想想Android系统⾃⾝的⼀些实现⽅式，⽐如参考ListView的Adapter，ViewPager定义翻页动画的Transformer等等，总会有意想不到的启发。总结

以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。如果你想了解更多相关内容请查看下⾯相关链接