// __________________________________________________
// | _ |
// | /|,/ _ _ _ / ` /_ _ . _ _/_ _ _ _ _|
// |/ / /_' / / /_/ /_, / / / / _\ / / / / /_| _\ |
// | _/ |
// | ~~** kimira **~~ |
// |__________________________________________________|
//
//
// , , , , , , , , ,
// , , , .____. , , , , ,
// , , , , | :| , , , ,
// , , , __|====|__ |||||| , ,
// , , , * / o o \ ||||||, , , ,
// , , , * | -= | \====/ , , ,
// , U==\__//__. \\// , ,
// , , , , / \\==// \ \ || , , ,
// , , ,| o || | \|| , , ,
// , , , | o "" |\_|B), , , ,
// , , , \__ --__/ || , , ,
// , , , / \ ||, , , ,
// , , | | || , , ,
// , , , ,| | || , , , , ,
// ------______------\__ --_ __/__LJ________---------_
老规矩先方效果图,吸引一波火力。
从效果图上可以看到,数字变化规律是数字先从个位开始变化,之前的数字向上移动一定距离,透明度变暗到不可见,新的数字从下向上移动一定距离到达正常展示区域,数字变化是从透明到不透明。如果个位数字刚好是到达9,需要位数递增,所以变化是个位+十位一起移动。
分析完动画效果后,我们在看看如何实现这种动画效果,根据之前的分析,应该可以有一定的思路处理了吧。
1、首先需要将数字进行打散,拆分成为一个数字数组,变化操作针对于数组中的单个元素操作即可,对整个数字的宽高度计算,可以将单个数字计算出来累积即可得到。
2、在数字变化的时候,可以看到变化的时候,数字滚动有一定间隔,所以控件的实际大小,应该是文字高度加上上下可移动间隔距离。
3、数字变化规律上面,如果数字个位<9,只在个位数字变化,如果出现9, 99, 999 这种操作的话,就需要对数字的递增位数也一起移动。要实现这个,可以保存一下之前的数字,两个数字的数组位数逐个比较,数字不同的位数一起移动即可。
4、让数字动起来,需要将老数字向上移动,并修改透明度,所以应该移动距离是(0—>-间隔距离),新数字向上移动,透明度从0到1,移动距离应该是(间隔距离—>0)。
好了,看看详细代码怎么实现。
//新数字拆分成的数组
private List flipNumbers = new ArrayList<>();