从数字滚动动画看自定义 View 的绘制思路

这是 JsonChao 的第 254 期分享

本文 Github 代码链接

https://github.com/AndroidMsky/RandomTextView

先看看掘金的效果：

    我们自己实现的效果：

    接下来介绍一下我的自定义View RandomTextView的用法和原理

用法

    拷入

RandomTextView.java

    只有200行绝对轻量方便。代码可以参考Github，这里就不复制了。

xml中定义：

    很开心的是，RandomTextView继承自TextView所以可以使用TextView的所有方法。color，size等等直接去定义就OK啦。

    所有位数相同速度滚动：

    从左到右侧由快到慢滚动：

    从左到右侧由慢到快滚动：

    自定义每位数字的速度滚动（每帧滚动的像素）：

    自定义滚动行数（默认10行）：

mRandomTextView.setMaxLine(20);

原理

    用TextView去绘制10（maxLine可设置）行文字，调用canvas.drawText去绘制出来，在绘制的Y坐标不断增加偏移量，去改变绘制的高度，通过handler.postDelayed(this, 20);不断增加偏移量，并且不断判断所有位数字最后一行绘制完毕的时候，结束handler的循环调用。

    第一次进入onDraw方法时，做了如下几件事情：
1.去获取当前正确的画笔p = getPaint();从而保证xml中配置的大小颜色等有效。
2.通过当前画笔去计算正确的drawText基准线。
           baseline = (getMeasuredHeight() - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
3.等到数字的宽度。方便横向绘制。
p.getTextWidths(“9999”, widths);f0 = widths[0];
4.直接通知view重绘。
invalidate();

    我们自己的绘制drawNumber方法：

    这里逻辑的时间复杂度达到了O（绘制行数＊字符串位数），是个双重循环的绘制。

    第一层我们称之为J循环，J循环每次循环的内容是绘制一列。

    第二层循环称之为I循环，I循环负责绘制每行的每一个字符。

    每次进入I循环的第一件事情是检查当前字符位，是不是最后一个

    如果是，则归零偏移量，修改标志位

pianyilianglist[j] = 0;
overLine[j] = 1;

    之后去判断所有字符位是否全部绘制到最后一个：

    如果是则将自动循环刷新的方法取消掉，并且通知view进行最后一次定位绘制。

    以上就是进入i循环先对是否绘制结束的判断。

    如果没有结束那么继续绘制。

    overLine［j］中的值的意思为：0表示还没绘制到最后一行，1表示为绘制到最后一行没有进行最后的定位绘制，2表示已经进行了定位绘制。

    可能对于初学者最难的就是drawText的坐标问题，x坐标比较简单，就是字符的宽度并且随着循环去变化：

0 + f0 * j

    Y坐标就是当前行的基准值＋上当前偏移量：

i * baseline + pianyiliangSum[j]

    我们还需要几个辅助的方法：

1.每隔20毫秒去计算当前偏移量并通知刷新。
2.帮助计算9上面的是几，8上面是几。
3.将字符串转换为INT数组。
4.通过Handler控制重绘。

    我们还需要几个供给用户调用的方法：
1.start开始滚动。
2.设置滚动行数maxline。
3.设置偏移量速度数组。
4.可能用户不希望每次都设置偏移量数组那么我们提供三种默认的偏移量速度数组（高位快，高位慢，速度相同）

回顾

    在自定义view的时候如果你的view是像本文一样，循环去绘制不断刷新的话，就意味着onDraw方法会随着你view的帧数不断的被调用，一秒可能被执行几十次。
    所以写在这里的方法，一定要小心为妙，比如一些无需每次都初始化的变量切记不可以定义在onDraw方法里。
    比如本文的getText();方法去获取当前TextView的内容，就要写在外面。
    但是可能有些方法你必须在super.onDraw(canvas)，以后才可以获取的比如getPaint();那么我们就可以加个布尔值firstIn来控制只有第一次进入onDraw方法才去执行，或者其它的只做一次的事情都可以这样去控制。

    循环绘制动画效果我们一定要理清两条线，一条是每一帧绘制什么，另一条是动画结束你都绘制了什么。

    第一条线应该注意你绘制的只是一个瞬间，是个不断重复执行的线。

    第二条线就是无数个第一条线加上时间点共同组成的，主要就是控制每次的不同，比如本文中增加的偏移量，是数据（本文中每一个字符的坐标）的变化，去影响onDraw方法，绘制不出东西呈现在屏幕上。第二条线还要控制好什么时候结束所有的第一条线，也就是整个动画结束的条件，本文中的例子讲是一旦所有字符的最后一行都超过或者等于TextView的基准线，那么整个动画结束。

    绘制原理的逻辑就讲完啦，RandomTextView可以投入使用啦，自定义view并不难，只要你知道安卓API能让你能干什么，你想干什么，你可能马上就知道你应该怎么做啦。

END

往期推荐

聊聊职场中最重要的两个核心能力

国庆返工日，卷起来！

如何系统构建你的思维认知模型？

如何从零到一掌控习惯？

那两年沉淀的时间增值心法

点击下方卡片关注 JsonChao，为你构建一套

未来技术人必备的底层能力系统

▲ 点击上方卡片关注 JsonChao，构建一套

未来 Android 开发必备的知识体系

欢迎把文章分享到朋友圈

年度成长社群