Splash启动页
启动界面改造和升级
上一篇《汉字笔画顺序之重新开启》的前言中，说到了《安卓练字板》是一个粗糙的版本，现在需要对其界面进行升级和改造。我们先来看看之前的Splash启动界面(上图)，那时候我只是用一张自己PS的图设置Background当启动界面。
采用这样的一张图，都没有进行适配，在分辨率不同的安卓手机上，有些手机必定会出现拉伸的情况。这次我不想只是用背景，将采用分层( 背景 + logo动画 + 画笔路径动画 ), 一层一层进行实现。
第一层：画笔路径动画之路径
在数学的数值分析领域中，贝塞尔曲线（英语：Bézier curve）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝塞尔曲线就称作贝塞尔曲面，其中贝塞尔三角是一种特殊的实例。
贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发，以稳定数值的方法求出贝塞尔曲线。
画笔路径动画第一步，用贝塞尔曲线来描述路径，不懂贝塞尔曲线的同学，可以先了解一下贝塞尔曲线，可能会好一些。笔画的路径如图下所示，我的思路是用三段三阶贝塞尔曲线拼起来。我参考了《Android自定义曲线路径动画框架》这篇文章，也是这里得到了思路。
画笔路径贝塞尔曲线图
这里我画了挺多时间，这些点好难找，谁有什么牛逼的办法可以告诉我啊～ 为了更好表示出三段曲线，我用了三种颜色来区分，更直观一些，本来我想用其他软件来画这个示意图的，尝试了一遍之后，发现还不如用代码画吧，结果画了很多时间（能用代码解决的问题，就老老实实用代码解决！）。画完这个，都很晚了，代码都没有来得及优化，Point坐标目前这样写是有一些问题的，先贴出来吧，后面再优化。
public class SplashPathView extends View {
private static final String TAG = SplashPathView.class.getSimpleName();
//圆点的画笔
private Paint mPaint0;
//第一段画笔
private Paint mPaint1;
//第二段画笔
private Paint mPaint2;
//第三段画笔
private Paint mPaint3;
//灰色画笔
private Paint mPaint4;
private Context mContext;
private int mScreenWidth = 0;
private int mScreenHeight = 0;
public SplashPathView(Context context, AttributeSet attrs) {
super(context, attrs);
Logger.init(TAG);
mContext = context;
mScreenWidth = DisplayUtil.getScreenWidth(mContext);
mScreenHeight = DisplayUtil.getScreenHeight(mContext);
initView();
}
private void initView() {
mPaint0 = new Paint();
mPaint1 = new Paint();
mPaint2 = new Paint();
mPaint3 = new Paint();
mPaint4 = new Paint();
//抗锯齿
mPaint0.setAntiAlias(true);
mPaint1.setAntiAlias(true);
mPaint2.setAntiAlias(true);
mPaint3.setAntiAlias(true);
mPaint4.setAntiAlias(true);
//防抖动
mPaint0.setDither(true);
mPaint1.setDither(true);
mPaint2.setDither(true);
mPaint3.setDither(true);
mPaint4.setAntiAlias(true);
//设置画笔未实心
mPaint0.setStyle(Paint.Style.FILL);
mPaint1.setStyle(Paint.Style.STROKE);
mPaint2.setStyle(Paint.Style.STROKE);
mPaint3.setStyle(Paint.Style.STROKE);
mPaint4.setStyle(Paint.Style.STROKE);
//设置颜色
mPaint0.setColor(Color.RED);
mPaint1.setColor(Color.GREEN);
mPaint2.setColor(Color.YELLOW);
mPaint3.setColor(Color.BLUE);
mPaint4.setColor(Color.LTGRAY);
//设置画笔宽度
mPaint0.setStrokeWidth(18);
mPaint1.setStrokeWidth(10);
mPaint2.setStrokeWidth(10);
mPaint3.setStrokeWidth(10);
mPaint4.setStrokeWidth(2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Point point1 = new Point(60, mScreenHeight - 160);
Point point2 = new Point(830, mScreenHeight - 530);
Point point3 = new Point(mScreenWidth / 3, mScreenHeight - 190);
Point point4 = new Point(point3.x - 50, point3.y + 75);
Point point5 = new Point(point1.x + 410, point1.y + 40);
Point point6 = new Point(point1.x + 350, point1.y - 80);
Point point7 = new Point(mScreenWidth / 4 * 2, mScreenHeight - 380);
Path path1 = new Path();
Path path2 = new Path();
Path path3 = new Path();
//移动到初始位置point1
path1.moveTo(point1.x,point1.y);
//第一段路径
path1.cubicTo(point1.x,point1.y,point2.x,point2.y,point3.x, point3.y);
//移动到初始位置point3
path2.moveTo(point3.x,point3.y);
//第二段路径
path2.cubicTo(point3.x, point3.y, point4.x, point4.y, point5.x, point5.y);
//移动到初始位置point5
path3.moveTo(point5.x,point5.y);
//第三段路径
path3.cubicTo(point5.x, point5.y, point6.x, point6.y, point7.x, point7.y);
canvas.drawPath(path1, mPaint1);
canvas.drawPath(path2, mPaint2);
canvas.drawPath(path3, mPaint3);
canvas.drawLine(point1.x, point1.y, point2.x, point2.y, mPaint4);
canvas.drawLine(point2.x, point2.y, point3.x, point3.y, mPaint4);
canvas.drawLine(point3.x, point3.y, point4.x, point4.y, mPaint4);
canvas.drawLine(point4.x, point4.y, point5.x, point5.y, mPaint4);
canvas.drawLine(point5.x, point5.y, point6.x, point6.y, mPaint4);
canvas.drawLine(point6.x, point6.y, point7.x, point7.y, mPaint4);
canvas.drawCircle(point1.x, point1.y, 10, mPaint0);
canvas.drawCircle(point2.x, point2.y, 10, mPaint0);
canvas.drawCircle(point3.x, point3.y, 10, mPaint0);
canvas.drawCircle(point4.x, point4.y, 10, mPaint0);
canvas.drawCircle(point5.x, point5.y, 10, mPaint0);
canvas.drawCircle(point6.x, point6.y, 10, mPaint0);
canvas.drawCircle(point7.x, point7.y, 10, mPaint0);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/color_white"
android:orientation="vertical">
<iiking.widget.SplashPathView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
代码我push到了github，有兴趣的可以关注一下https://github.com/iiking/PracticeWriteboard 。
第一步把路径画出来了，下一篇开始用这个路径做一个动画。
