微信号:appjiagou

介绍:分享最有价值的APP技术干货文章,做一个有逼格的APP架构师,拒绝平庸,打造最有价值的APP社区!

炫酷 | 自定义实现神奇的卡片切换效果

2017-09-29 07:52 APP架构师

本文由BakerJ投稿。BakerJ的博客地址:http://bakerjq.com/


1.前言


面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,what are you 弄啥咧?!


“哥哥我做不到啊…..啊…..呸”,做为一名有节操的程序猿,自然是不能说出这么没有出息的话,哥就满足你们,于是,出了个可自定义动效的卡片切换视图,效果如下所示





Github地址:

https://github.com/BakerJQ/Android-InfiniteCards


2.思路


首先,要展示出卡片层叠的视觉效果。在这里,我们通过方块的缩放大小差异以及在Y方向上的位置差异,来展现这种视觉效果。


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


最后,要能够自定义动效。


我们通过定义一个由0到1的ValueAnimator,即每个动画的过程,其实就是该ValueAnimator在一个动画周期内,从0变化到1的过程,0表示动画刚开始,1表示动画结束了,0.5则表示这一轮动画已经执行到了一半。


这样,通过转换器以及插值器,我们就可以根据ValueAnimator实时的值,来设置当前正在执行动画的卡片应该有的“样子”。


3.总览


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



并通过Helper类来处理所有的动画逻辑,以及Adapter来生成卡片视图



在onMeasure时根据卡片宽高比来设置卡片的尺寸,在此请注意,当前情况下卡片宽度与整体容器宽度一致,后续通过自定义的方式,通过缩放来产生卡片的视觉效果。



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



4.细节


那么,动画到底是如何实现的,以及如何自定义的呢,我们以通用动画为例,来看看动画的主要流程。


首先,在ValueAnimator更新的时候,获得当前的动画系数,依次来执行动画



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



最后,通过转换器,对卡片进行自定义动画处理



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



对于向第一位移动的选中卡片,也是同理,只不过是根据该卡片对应的转换器来进行自定义动画的转换。


最后的效果,就像演示图中第一次点击,图片向前翻转到第一位的效果一样。


5.总结


对于产品狗突如其来的想法,咱们程序猿不善于口水仗的,就只能用代码来让他们来服气了。毕竟,大家还都是伐木累嘛,哈哈。


当实现某个东西遇到困难时,不妨想想Android系统自身的一些实现方式,比如参考ListView的Adapter,ViewPager定义翻页动画的Transformer等等,总会有意想不到的启发。


再次贴一下Github地址:

https://github.com/BakerJQ/Android-InfiniteCards


 

如果你有好的文章想和大家分享欢迎投稿,直接向我投递文章链接即可。



 
APP架构师 更多文章 【重磅】Android组件化开发框架 再见,余!额!宝!!! 【重磅】Android组件化开发框架 Android界面性能优化最全总结、原理剖析,必读! Android 模块化探索与实践
猜您喜欢 理解水平扩展和垂直扩展 一个可供参考的Java高并发异步应用案例 计算机程序的思维逻辑 (12) - 函数调用的基本原理 中文情感分析 (Sentiment Analysis) 的难点在哪? PostgreSQL 中统计信息计算