使用DashPathEffect绘制一条动画曲线

来源：互联网发布：win10桌面软件不见了编辑：程序博客网时间：2024/06/04 19:08

引言

以前在做曲线图的时候，一直想实现曲线动态绘制的效果。类似于js图表库中的效果：http://www.highcharts.com/demo/spline-symbols

那个时候没有安卓中没有任何一个原声的图表库实现了这种效果。不管是aChartEngine，还是后来的MPAndroidChart，HelloCharts都没有在曲线图方面做到很好的展示效果。

HelloCharts以及一些其它的图表库（不太出名的）倒是实现了一种曲线的动画效果，类似于：

但这是上下运动，我要的是线条的跟踪绘制动画效果。

是不是在安卓上要实现跟踪绘制非常难呢？

其实不难，只是那个时候大家对于api都不太熟悉。

Romain Guy的方法

直到Romain Guy发表了一篇文章http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/

里面使用path的画笔的DashPathEffect巧妙的实现了这种动画效果。

虽然我的期望是path应该有一个设置自己绘制长度的方法（这样就可以轻易的实现跟踪绘制了，遗憾的看了path的源码也没发现这样的东西存在），但是DashPathEffect这种技巧看上去也算是比较正统，可以算得上时最佳实践了吧。

ps：一会儿我会向你介绍一下我以前在不知道DashPathEffect的情况下是如何实现的。

好了回到Romain Guy用DashPathEffect实现的原理上来。

首先得介绍DashPathEffect这个类。

DashPathEffect

DashPathEffect是PathEffect类的一个子类,可以使paint画出类似虚线的样子,并且可以任意指定虚实的排列方式。

举个例子：

Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setStyle(Style.STROKE);
p.setColor(Color.WHITE);
p.setStrokeWidth(1);
PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4, 8}, 1);
p.setPathEffect(effects);
canvas.drawLine(0, 40, mWidth, 40, p);

代码中的float数组,必须是偶数长度,且>=2,指定了多少长度的实线之后再画多少长度的空白。

如本代码中,绘制长度1的实线,再绘制长度2的空白,再绘制长度4的实线,再绘制长度8的空白,依次重复。1是起始位置的偏移量。

效果如下:

技巧

然而这跟我们绘制跟踪效果有什么关系呢？

看看这样一个PathEffect：

PathEffect effect = new DashPathEffect(new float[] { length, length }, 0);

我们可以把DashPathEffect的第一个参数（float数组）只填入两个值，都是path的总长度length，那么按照上面对DashPathEffect的解释，第一次绘制一条实线就已经完全绘制完了，间隔的空白区间得不到绘制的机会。事实上这样绘制完全不能产生虚线效果，跟不设置PathEffect是一样的。

但是我们注意第三个参数即起始位置的偏移量现在是为0的。如果我们不为0呢？

比如为100，那么第一次绘制实线就会跳过100的距离，第一次的实线就只能绘制length－100的长度，那么空白区域就可以绘制100的长度，但是你看不见空白，所以我们只会感觉到绘制了一条length－100的路径。

如果你按照我们的思路去做实验，那么很快你就会想到，把这个偏移量也设置成length，那么第一次的实线区间将完全得不到绘制，而直接进入空白区间，而我们的空白区间总长度也是length，因此它占用了全部的绘制区间，所以此时什么也看不到。如果空白区间小于length的话，是可以看到一点实线的（因为空白区间完了紧接着就是实线了）。

所以，我们可以设置一个百分比，取名叫phase，phase的增长是从0 .0－1.0,如果我们利用属性动画来改变它，然后根据它动态的构造一个这样的DashPathEffect：

new DashPathEffect(new float[] { length, length },
        length - phase * length);

这样就能产生跟踪绘制的效果。

获取path的长度

刚刚我们多次提到了path的总长度length，那么对于一条不规则的曲线来讲，要得到其长度是很难的。幸运的是，有相应的api：

// Measure the path
PathMeasure measure = new PathMeasure(path, false);
float length = measure.getLength();

完整的代码

stackoverflow上有人根据Romain Guy的那篇文章写了一个演示的例子（Romain Guy自己也写了一个项目，不过里面并不单单是讲这个的，因此不太好找），在这里：http://stackoverflow.com/questions/5367950/android-drawing-an-animated-line

我把它写在改了下，做成了一个demo。代码不多我直接贴完所有代码：

MainActivity

package com.jcodecraeer.pathanimate;
 
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final PathView path_view = (PathView) findViewById(R.id.path);
        path_view.init();
        path_view.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                path_view.init();
            }
        });
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
 
    <com.jcodecraeer.pathanimate.PathView
        android:id="@+id/path"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
 
</RelativeLayout>

PathView

package com.jcodecraeer.pathanimate;
 
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
 
/**
 * Created by jianghejie on 15/9/7.
 */
 
public class PathView extends View
{
    Path path;
    Paint paint;
    float length;
 
    public PathView(Context context)
    {
        super(context);
    }
 
    public PathView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }
 
    public PathView(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
    }
 
    public void init()
    {
        paint = new Paint();
        paint.setColor(Color.DKGRAY);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
 
        path = new Path();
        path.moveTo(50, 50);
        path.lineTo(50, 500);
        path.lineTo(200, 500);
        path.lineTo(200, 300);
        path.lineTo(350, 300);
        path.quadTo(360,100,400,310);
 
        // Measure the path
        PathMeasure measure = new PathMeasure(path, false);
        length = measure.getLength();
 
        float[] intervals = new float[]{length, length};
 
        ObjectAnimator animator = ObjectAnimator.ofFloat(PathView.this, "phase", 0.0f, 1.0f);
        animator.setDuration(3000);
        animator.start();
    }
 
    //is called by animtor object
    public void setPhase(float phase)
    {
        Log.d("pathview", "setPhase called with:" + String.valueOf(phase));
        paint.setPathEffect(createPathEffect(length, phase, 0.0f));
        invalidate();//will calll onDraw
    }
 
    private static PathEffect createPathEffect(float pathLength, float phase, float offset)
    {
        return new DashPathEffect(new float[] { pathLength, pathLength },
                pathLength - phase * pathLength);
//        return new DashPathEffect(new float[] { phase*pathLength, pathLength },
//               0);
    }
 
    @Override
    public void onDraw(Canvas c)
    {
        super.onDraw(c);
        c.drawPath(path, paint);
    }
}

在createPathEffect方法中，细心的人会注意到被注释掉了的return：

return new DashPathEffect(new float[] { phase * pathLength, pathLength },
       0);

其实用注释掉了的替换得到的效果是相同的。前不久我介绍的AndroidFillableLoaders库https://github.com/JorgeCastilloPrz/AndroidFillableLoaders就是用的这种，应该说这个其实比Romain Guy用改变起始偏移量来实现更好理解些。不过我还是喜欢Romain Guy的方式。

好了如果你运行上面的代码的话，得到的效果如下：

未命名.gif

最勉强的实现方法

刚刚我们讲到，以前我不知道PathEffect这种东西，于是我想了个方法。那就是在绘制线条之前，先用canvas裁减一个矩形区域，该矩形区域的高度可以覆盖完曲线（当然是需要计算得出的），而起始位置和曲线相同，然后不断的加长矩形区域的宽度。在裁减矩形范围内的曲线可以显示出来，而在这之外的部分则不能显示，因此就会得到一种曲线不断延长的效果。

大致的代码如下：

canvas.clipRect(0, 0, (int)((float)maxCanvasWidth * percent), maxCanvasHeight);
.....
canvas.drawPath(path, paint);

对于Y值总是随着x轴增加的曲线，这种方式问题不大。但是对于比如c形的曲线，这种方式一眼就能看出问题来。自行脑补吧！

因为这个方式本身已经失去意义，我也就不多讲了。

0 0