Custom view, use the paint canvas some of the temperature, talk about using path painting to achieve animation effect (Basic article three)

Reprint please indicate the source of Wang 亟亟 's Daniel Road

Last week on an animation of the custom view of the article, and then the implementation is Pathmeasure, and then this part seems to have not been said before, then a supplement to introduce this part of the knowledge (the Portal: blog.csdn.net/ddwhan0123/article/details/51066859)

Just to say a little abstract, let's look at the effect of the demo:

When you move, it's like this.

That's the pause.

In fact, this realization, a coordinate increment painting and then has been invalidate can do, but it is too cumbersome to write, pathmeasure a good solution to this part of the problem.

Theory

What is the role of pathmeasure?

Measure the length of the path, that is, the set of points that find the path in our run (or painting) process. (Don't look for coordinates anymore!!) ）

How are we going to use it?

 PathMeasure pathMeasure=new PathMeasure(); pathMeasure.setPath(path,true);

Create an empty object, and then pass in the desired path and path if Close is dropped

Of course, you can also use another constructor to see what you prefer.

So how do we get the operation of the path content on the way?

Execute mPathMeasure.getPosTan(value, coords, null); Get the coordinate information we want to get, and then show it in the animation's effective interval, OK, let's see the source code.

The package content is simple, just a custom view+ hosted activity

 PackageCom.wjj.demo.view;ImportAndroid.animation.ValueAnimator;ImportAndroid.content.Context;ImportAndroid.graphics.Canvas;ImportAndroid.graphics.Color;ImportAndroid.graphics.Paint;ImportAndroid.graphics.Path;ImportAndroid.graphics.PathMeasure;ImportAndroid.util.AttributeSet;ImportAndroid.util.Log;ImportAndroid.view.View;ImportAndroid.view.animation.DecelerateInterpolator;ImportCOM.WJJ.DEMO.R; Public  class customview extends View {Valueanimator Valueanimator;PrivatePathmeasure mpathmeasure;PrivatePaint paint;PrivatePath path;Private float[] coords =New float[2];Private intXdraw, Ydraw; Public CustomView(Context context) {Super(context);    Init (); } Public CustomView(context context, AttributeSet attrs) {Super(context, attrs);    Init (); }Private void Init() {paint =NewPaint (Paint.anti_alias_flag); Paint.setstrokewidth (Ten); Path =NewPath (); Path.moveto ( -, -); Path.lineto ( -, -); Path.lineto ( -, -); Path.lineto ( -, -); Path.lineto ( -, -); Mpathmeasure =NewPathmeasure (Path,true); coords =New float[2]; coords[0] = -; coords[1] = -; }@Override    protected void onmeasure(intWidthmeasurespec,intHEIGHTMEASURESPEC) {Super. Onmeasure (Widthmeasurespec, Heightmeasurespec);        Xdraw = Measurehandler (Widthmeasurespec);        Ydraw = Measurehandler (Heightmeasurespec);    Setmeasureddimension (Xdraw, Ydraw); }//Dimensional mapping    Private int Measurehandler(intMEASURESPEC) {intVale =520;intSpecmode = Measurespec.getmode (Measurespec);intSpecsize = Measurespec.getsize (Measurespec);if(Specmode = = measurespec.exactly)        {Vale = specsize; }Else if(Specmode = = measurespec.at_most)        {Vale = Math.min (Vale, specsize); }Else{Vale =520; }returnVale }@Override    protected void OnDraw(Canvas canvas) {Super. OnDraw (canvas);        Canvas.drawcolor (Color.White);        Paint.setstyle (Paint.Style.STROKE);        Paint.setcolor (Getresources (). GetColor (R.color.plum)); Canvas.drawpath (path, paint);//Draw corresponding targetsPaint.setcolor (Getresources (). GetColor (R.color.violet));        Paint.setstyle (Paint.Style.FILL); Canvas.drawcircle (coords[0], coords[1], -, paint); }//Turn on animation     Public void Startanim(LongDuration) {Valueanimator = Valueanimator.offloat (0, Mpathmeasure.getlength ()); LOG.D ("-->measure Length","Measure length ="+ mpathmeasure.getlength ()); Valueanimator.setduration (duration);//Deceleration interpolatorValueanimator.setinterpolator (NewDecelerateinterpolator ()); Valueanimator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override             Public void onanimationupdate(Valueanimator animation) {floatValue = (Float) animation.getanimatedvalue ();//Get current point coordinates encapsulated to coordsMpathmeasure.getpostan (value, coords,NULL);            Postinvalidate ();        }        });    Valueanimator.start (); }//Stop animation     Public void Stopanim() {valueanimator.cancel (); }}

Important steps have been annotated, the interpolator and other content in the previous articles have been written, unclear or forgotten can be seen here: http://blog.csdn.net/ddwhan0123/article/details/50464283

Then explain why at first it gave the container an array of coordinates, because not to do so, the point where the dot starts is in (0,0)

Code Address: Https://github.com/ddwhan0123/BlogSample/tree/master/PathMeasureDemo

: Https://github.com/ddwhan0123/BlogSample/blob/master/PathMeasureDemo/PathMeasureDemo.zip

Custom view, use the paint canvas some of the temperature, talk about using path painting to achieve animation effect (Basic article three)