Android杂谈（21）补坑+Path动画

转载请注意：http://blog.csdn.net/wjzj000/article/details/59112306

本菜开源的一个自己写的Demo，希望能给Androider们有所帮助，水平有限，见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect （拆解GitHub上的优秀框架于一体，全部拆离不含任何额外的库导入）
https://github.com/zhiaixinyang/MyFirstApp（Retrofit+RxJava+MVP）

写在前面

来到学校接近一周的时间算是啥也没干，这篇博客便是打响武装反抗惰性学习第一枪。

之前写过一篇博客：http://blog.csdn.net/wjzj000/article/details/53929870
是关于官方的侧滑控件DrawerLayout，它本身的用法比较简单。只是我隐隐约约记得之前留了一个坑：那个可以动的控制侧滑菜单打开关闭的按钮。
正好结合这Path动画，把这个坑填上。

---

填坑

上篇博客中使用的有动画效果的箭头是来自：https://github.com/ChrisRenke/DrawerArrowDrawable
的开源作品，具体的使用方式，各位看官可以移步这位大神的GitHub上，一睹傲视武林一统江湖的王者之霸气。
这里简单梳理一下源码，然后进去本次博客想记录的核心Path动画。

    public DrawerArrowDrawable(Resources resources, boolean rounded) {        this.rounded = rounded;        float density = resources.getDisplayMetrics().density;        float strokeWidthPixel = STROKE_WIDTH_DP * density;        halfStrokeWidthPixel = strokeWidthPixel / 2;        linePaint = new Paint(SUBPIXEL_TEXT_FLAG | ANTI_ALIAS_FLAG);        linePaint.setStrokeCap(rounded ? ROUND : BUTT);        linePaint.setColor(BLACK);        linePaint.setStyle(STROKE);        linePaint.setStrokeWidth(strokeWidthPixel);        int dimen = (int) (DIMEN_DP * density);        bounds = new Rect(0, 0, dimen, dimen);        Path first, second;        JoinedPath joinedA, joinedB;        // 按钮的第一条线的相关路径操作        first = new Path();        first.moveTo(5.042f, 20f);        // 三阶贝塞尔曲线：说白了就是给定四个坐标点（moveTo为起始点，rCubicTo分别代表第一个控制点，第二个控制点，结束的点），系统通过贝塞尔方程画出一个线来。        first.rCubicTo(8.125f, -16.317f, 39.753f, -27.851f, 55.49f, -2.765f);        second = new Path();        second.moveTo(60.531f, 17.235f);        second.rCubicTo(11.301f, 18.015f, -3.699f, 46.083f, -23.725f, 43.456f);        //将路径缩放到给定的屏幕密度。（让按钮大小适配屏幕）        scalePath(first, density);        scalePath(second, density);        joinedA = new JoinedPath(first, second);        //省略大量类似代码    }

从这里我们基本可以看出，作者是直接使用多个Path来完成效果。
其中通过PathMeasure每个Path上的每个点的坐标位置，然后不断的重新绘制线段。
作者通过，如下代码进行回调，请求重绘：

new DrawerLayout.SimpleDrawerListener() {     @Override public void onDrawerSlide(View drawerView, float slideOffset) {            offset = slideOffset;            if (slideOffset >= .995) {                flipped = true;                drawerArrowDrawable.setFlip(flipped);            }            //省略部分代码

public void setFlip(boolean flip) {        this.flip = flip;        invalidateSelf();}

回调产生以后，就会调用作者封装的draw方法：

private void draw(Canvas canvas) {        pathA.getPointOnLine(parameter, coordsA);        pathB.getPointOnLine(parameter, coordsB);        if (rounded) insetPointsForRoundCaps();        //coordsA当前路线的坐标，通过PathMeasure的getPosTan方法获得。        canvas.drawLine(coordsA[0], coordsA[1], coordsB[0], coordsB[1], linePaint);}

通过PathMeasure的getPosTan获取中Path的多点坐标，然后重新绘制线段。完成动态效果。

OK，关于填坑，就到这里了。因为作者的源码比较的长。所以各位看官如果感兴趣的话，可以自己移步作者的GitHub之上就查看源码。

作者继承了android.graphics.drawable.Drawable来完成这个效果：
关于Drawable的官方解释：
Drawable是“可以绘制的东西”的一般抽象。通常你会处理Drawable作为绘制东西到屏幕上检索的资源类型; Drawable类提供了一个通用的API来处理可能采取各种形式的底层视觉资源。与View不同，Drawable没有任何功能来接收事件或与用户交互。

---

Path动画

接下来的内容是结合ValueAnimator结合Path实现动态的Path效果。
先看一下效果：

直接上代码：

初始化Path和Paint：

paint = new Paint();paint.setColor(Color.DKGRAY);paint.setStrokeWidth(10);paint.setStyle(Paint.Style.STROKE);path = new Path();path.moveTo(50, 50);for (int i = 0; i < 4; i++) {    path.lineTo(450 - i * 50, 50 + i * 50);    path.lineTo(450 - i * 50, 450 - i * 50);    path.lineTo(50 + i * 50, 450 - i * 50);    path.lineTo(50 + i * 50, 100 + i * 50);}

setPathEffect:

        PathMeasure measure = new PathMeasure(path, false);        length = measure.getLength();        animator = ValueAnimator.ofFloat(0.0f, 1.0f);        animator.setDuration(5000);        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                float fraction = animation.getAnimatedFraction();                //这里使用了一个DashPathEffect的技巧                paint.setPathEffect(createPathEffect(length, fraction));                postInvalidate();            }        });        animator.start();private static PathEffect createPathEffect(float pathLength, float phase) {        return new DashPathEffect(new float[]{pathLength, pathLength},                pathLength - phase * pathLength); }

我们在new DashPathEffect的时候传入的间隔值就是Path的全长，因此这里是没有间断的。我们控制Path的动画，实际是控制DashPathEffect的偏移，也就是pathLength - phase * pathLength，这个值是从Path全长随动画的进度逐渐减小到0。
对应到我们的效果之上就是Path从什么都没有，然后知道全部展现。（因为此时的偏移为0）

onDraw()中很简单，就是调用drawPath:

    @Override    public void onDraw(Canvas c) {        super.onDraw(c);        c.drawPath(path, paint);     }

原理非常的简单，我们可以理解是使用了DashPathEffect的错位效果。我们都知道DashPathEffect的一般制作效果是波浪线。
而这里我们使用它的偏移属性，做到了线段追逐的效果。
因为需要动态更新效果，所以使用动画进行控制。

PS：相关源码基本都存放于我的这个开源项目之中：
https://github.com/zhiaixinyang/PersonalCollect

---

尾声

OK，坑到这也填的差不多了。
学习虽好，但不要贪杯。有情不必终老，暗香浮动恰好。

最后希望各位看官可以star我的GitHub，三叩九拜，满地打滚求star：
https://github.com/zhiaixinyang/PersonalCollect
https://github.com/zhiaixinyang/MyFirstApp