? ? ? ? ? ? ? ? case 'Z':
? ? ? ? ? ? ? ? case 'z': {
? ? ? ? ? ? ? ? ? ? // 封闭path
? ? ? ? ? ? ? ? ? ? p.close();
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? }

? ? ? ? return p;
? ? }

有了图形对应的path，我们只需要按照我们想要的效果进行绘制即可，具体过程不再细讲，大家看代码：

@Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? super.onDraw(canvas);
? ? ? ? if (mState == STATE_NOT_STARTED || mGlyphData == null) {
? ? ? ? ? ? return;
? ? ? ? }

? ? ? ? long t = System.currentTimeMillis() - mStartTime;

? ? ? ? // 绘制出现前的边沿线和跑动过程
? ? ? ? for (int i = 0; i < mGlyphData.length; i++) {
? ? ? ? ? ? float phase = MathUtil.constrain(0, 1,
? ? ? ? ? ? ? ? ? ? (t - (mTraceTime - mTraceTimePerGlyph) * i * 1f / mGlyphData.length)
? ? ? ? ? ? ? ? ? ? ? ? ? ? * 1f / mTraceTimePerGlyph);
? ? ? ? ? ? float distance = INTERPOLATOR.getInterpolation(phase) * mGlyphData[i].length;
? ? ? ? ? ? mGlyphData[i].paint.setColor(mTraceResidueColors[i]);
? ? ? ? ? ? mGlyphData[i].paint.setPathEffect(new DashPathEffect(
? ? ? ? ? ? ? ? ? ? new float[] {
? ? ? ? ? ? ? ? ? ? ? ? ? ? distance, mGlyphData[i].length
? ? ? ? ? ? ? ? ? ? }, 0));
? ? ? ? ? ? canvas.drawPath(mGlyphData[i].path, mGlyphData[i].paint);

? ? ? ? ? ? mGlyphData[i].paint.setColor(mTraceColors[i]);
? ? ? ? ? ? mGlyphData[i].paint.setPathEffect(new DashPathEffect(
? ? ? ? ? ? ? ? ? ? new float[] {
? ? ? ? ? ? ? ? ? ? ? ? ? ? 0, distance, phase > 0 ? mMarkerLength : 0,
? ? ? ? ? ? ? ? ? ? ? ? ? ? mGlyphData[i].length
? ? ? ? ? ? ? ? ? ? }, 0));
? ? ? ? ? ? canvas.drawPath(mGlyphData[i].path, mGlyphData[i].paint);
? ? ? ? }

? ? ? ? if (t > mFillStart) {
? ? ? ? ? ? if (mState < STATE_FILL_STARTED) {
? ? ? ? ? ? ? ? changeState(STATE_FILL_STARTED);
? ? ? ? ? ? }

? ? ? ? ? ? // 绘制渐变出现的过程，即改变alpha过程
? ? ? ? ? ? float phase = MathUtil.constrain(0, 1, (t - mFillStart) * 1f / mFillTime);
? ? ? ? ? ? for (int i = 0; i < mGlyphData.length; i++) {
? ? ? ? ? ? ? ? GlyphData glyphData = mGlyphData[i];
? ? ? ? ? ? ? ? mFillPaint.setARGB((int) (phase * ((float) mFillAlphas[i] / (float) 255) * 255),
? ? ? ? ? ? ? ? ? ? ? ? mFillReds[i],
? ? ? ? ? ? ? ? ? ? ? ? mFillGreens[i],
? ? ? ? ? ? ? ? ? ? ? ? mFillBlues[i]);
? ? ? ? ? ? ? ? canvas.drawPath(glyphData.path, mFillPaint);
? ? ? ? ? ? }
? ? ? ? }

? ? ? ? if (t < mFillStart + mFillTime) {
? ? ? ? ? ? ViewCompat.postInvalidateOnAnimation(this);
? ? ? ? } else {
? ? ? ? ? ? changeState(STATE_FINISHED);
? ? ? ? }
? ? }

好了，主要的问题和思路基本如上，有些人可能会说，你这讲的跟UX分享似的，没毛线用，其实我的目的只有一个，那就是不管你是否能看懂代码，都能按照我上面所说做出自己想要的效果，并加以改变，灵活运用，毕竟轮子不需要重复造！

源码下载地址：

百度网盘下载： http://pan.baidu.com/s/1bnuK5L9

------------------------------------------分割线------------------------------------------

具体下载目录在 /2015年资料/8月/20日/Android使用SVG矢量图打造酷炫动画效果/

------------------------------------------分割线------------------------------------------