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);

}

}

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">

android:layout_width="match_parent"

android:layout_height="match_parent" />

第一步把路径画出来了，下一篇开始用这个路径做一个动画。