化形人参果,弟弟都是狼书包网,朝天锅是哪个地方的菜
前言
面对众多卡片层叠效果，我们的产品童鞋也突发奇想，搞出了另一种卡片层叠切换展示的交互，而且产品狗们居然要求多做几种动效给他们看，好让他们选择，这简直就是要搞事情啊，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<carditem> 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等等，总会有意想不到的启发。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论