一.数字增减时的动画效果(BeatNumber)

仿即刻点赞效果

1. 总体思路

将数字分两部分绘制
第一部分，绘制未改变的文字，并记录下其终点坐标x。
第二部分，绘制改变文字，以x为起点坐标

2.要解决的几个问题

1. 控件(BeatNumber)的宽度和高度，

文字的基准线位置INIT_Y。
控件的宽度为文字的宽度，
控件的高度为文字高度的三倍
文字的基准线为2倍文字的高度（图中蓝点位置）

image

2. 增加或减少数字时，文字基准位置的变化。

textYOffset文字基准线的偏移量（初始为0）
数字增加时，textYOffset不断减一，(textYOffset最多偏移textHeight)
当前文字的基准前位置为INIT_Y+textYOffset
新文字的基准线位置为INIT_Y+textHeight+textYOffset。
数字减少时同理

image

3.增加或减少数字时，文字随着的透明度变化。

文字的透明度根据偏移的完成度（degress=textYOffset/textHeight）,计算的。

 float degress = Math.abs(textYOffset) /(textHeight*1f);//偏移的完成度
 int alphaInt = (int) ((1-degress) * 255);//完成度越高，透明度越高，透明值越低
 outTextPaint.setAlpha(alphaInt);

3.需要使用到的知识和技巧

1. Piant 相关

1.1 Paint.measureText(String text) 测量文字宽度（含左右空白边距）
使用此方法获取文字宽度
1.2 Paint.getTextBounds(String text, int start, int end, Rect bounds)测量文字范围（不包含空白边距）
使用此方法，获取文字高度
1.3 Paint.setAlpah(int alpha) alpah=0-255();

0	255
0f	1f
完全透明	完全不透明

2.绘制技巧

2.1 参数改变后，调用invalidate重绘，以达到动画效果的作用。
2.2 内容的绘制要放在判断是否重绘之前。(这个技巧很重要，可以是较少判断逻辑)
一般的流程是

//根据参数绘制
绘制内容代码

//判断
if(参数满足条件){
    invalidate();//重绘
}else{
    更具需要重置参数
}

3. 如果有变量的渐变，最好设置一个变量来记录偏移量,而不是直接改变原来的变量。
   如：基准线的改变，就没有直接改变INIT_Y,而是改变偏移量textYOffset，然后根据
   INIT_Y和textYOffset的计算来改变