“啥是佩奇？” Android 开发者眼里的佩奇

《啥是佩奇》可谓是年前的一大热点，所谓热点就是你在干嘛，它都能进入你的视线。刚好有看到用Python画佩奇的，所以就寻思着用Android也画了一个。

佩奇完工已有些时日，一直想写篇文章记录下，奈何拖到现在。限于水平有限，不对的地方，还望斧正。

直接点，咱们先来看一下效果，然后再去想怎么画出来。

简单分析下佩奇，会发现构图基本由曲线构成的，还有部分使用了圆、椭圆、矩形等常规图形。

常规图形我们使用Canvas绘制，曲线部分我们使用Path绘制贝塞尔曲线。

所以这篇文章分为三个模块：分别介绍Canvas的使用、Path基础、Path绘制贝塞尔曲线。

1.Canvas回顾

Canvas的使用相对基础一点，我们来一起通过API回顾下：

具体到每个API就不展开说明了，如有需要可以查看末尾的参考文章，都有很详细的介绍，这里我们画个鼻子做示例：

图片有些卡顿，流程还是容易知晓的：

1.绘制一个倾斜的椭圆，进度变化，闭环时上色

2.绘制两个小圆环，进度变化，闭环时上色

3.为了绘制方便，椭圆和小圆是同时绘制的

分析完成那就开撸吧，具体数值都是yy得来的，我们主要看一下流程步骤和api的使用：

细节注释都有说明，至于绘制进度百分比，我们这里使用的 ValueAnimator类。

当只要执行这一个动画的时候，直接调用 animNose.start() 就可以了。

2.Path初识

The Path class encapsulates compound (multiple contour) geometric paths consisting of straight line segments, quadratic curves, and cubic curves. It can be drawn with canvas.drawPath(path, paint), either filled or stroked (based on the paint's Style), or it can be used for clipping or to draw text on a path.

简单说就是：Path可以通过直线、二次、三次贝塞尔曲线，以及填充描边模式，做出各种炫酷效果。

Path官方文档直通车

https://developer.android.com/reference/android/graphics/Path

我们还是来一起看一下API：

这里依旧没有展开来说，看着比较干瘪无趣，但应该会对Path的能力有所了解。

至于详细使用，可以查看精彩的参考文章：

Path从懵逼到精通（1）——基本操作

https://www.jianshu.com/p/b872b064d369

3.Path和贝塞尔曲线

3.1 我们先来假装了解一下贝塞尔曲线：

以下内容摘抄自维基百科：

在数学的数值分析领域中，贝塞尔曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝兹曲面，其中贝兹三角是一种特殊的实例。

贝塞尔曲线于1962年，由法国工程师皮埃尔·贝兹（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由保尔·德·卡斯特里奥于1959年运用德卡斯特里奥算法开发，以稳定数值的方法求出贝塞尔曲线。

一阶贝塞尔曲线（线性曲线）

对于一阶贝赛尔曲线，我们可以理解为在起点和终点形成的这条直线上，匀速移动的点。

二阶贝塞尔曲线

为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：

1.由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。

2.由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。

3.由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。

也可以说是：P0Q0 : P1Q1 = P1Q1 : P1P2 = Q0B : Q0Q1 = t

三阶贝塞尔曲线

对于三次曲线，可由线性贝塞尔曲线描述的中介点Q0、Q1、Q2，和由二次曲线描述的点R0、R1所建构。

我帮大家把更更高阶的贝塞尔曲线省略了...如果你觉得还想继续深入一下，可以点击原文查看。

3.2 Path绘制贝塞尔曲线

Android是支持贝塞尔曲线的，但是只支持到三阶，我们来一起了解一下：

这里我们来画类似于口哨这么个玩意：

这里我们是分为两部分进行绘制的，第一部分到拐点那里，是个三阶曲线；第二部分是个二阶曲线。第一部分的终点就是第二部分的起点。

起点、终点、拐点坐标都相对好确定，可是这些控制点的坐标怎么确定呐？

实际项目中我们可以请设计帮忙，通过ps给个大致估算，这里只是跟着感觉试出来的，所以也就是个大致轮廓，不要介意。

代码比较简单，就是坐标点的信息有点多：

静态绘制这样就完工了，可是我们怎么才能实现动态绘制呐？

3.3 动态绘制贝塞尔曲线（TypeEvaluator估值器的使用）

为了获取实时的坐标，我们需要通过 TypeEvaluator 打造一个属于我们自己的估值器。

首先我们需要创建一个自己的类，用于记录各种点信息和具体操作信息：

再写一个类用来记录Path的相关操作，并且记录到具体的ViewPoint中：

最后就是我们的关键点，通过实现TypeEvaluator接口，来打造我们自己的估值器，最终返回实时的坐标。

我们通过泛型传入ViewPoint类，并且复写evaluate()方法。

evaluate() 方法共有三个参数，分别是：当前进度、起始数据和终点数据。

具体计算过程则是分清每一种操作类别，然后套计算公式即可。

具体使用如下：

执行下start()操作，就是一个动态绘制的猪头了：

http://www.10tiao.com/img.do?url=https%3A//mmbiz.qpic.cn/mmbiz_gif/MOu2ZNAwZwNAdOIvzXzqwrKLfibr9MVpnbuYe3xmrIpic34GoP3I0YmjrpkQK7ffvbCtxWIbaZyFv3GjJicn21saA/640%3Fwx_fmt%3Dgif

至于让所有的动画连起来绘制，则使用AnimatorSet类，playSequentially()方法是将动画集合按顺序播放。

最后附上小编整理出来的Android相关的学习思维导图，让大家有个学习的方向。

Android进阶

Android前沿技术

Flutter

移动架构师

需要这些安卓学习资料和面试资料的大伙需要的关注+点赞+加群：185873940 免费获取！

群内还有许多免费的关于高阶安卓学习资料，包括高级UI、性能优化、架构师课程、 NDK、混合式开发：ReactNative+Weex等多个Android技术知识的架构视频资料，还有职业生涯规划及面试指导。