A: reading



Let’s start with a GIF of the welcome page of a query-like App.

I was working on my welcome page, and I decided to share this example with you. You can see the animation paths that Path draws in a few lines of code.

There are many tutorials about Path on the Internet. This is just an example combining Path and PathMeasure to explain the principle.


 

B: There are several steps here

1, because it is a welcome page, so the display time should not be too long. Set this parameter to about 3S.


2, early material icon: book, search, bar text


3. Specify that the search icon in the center of the screen, after two turns on the book, gradually appears as text to express the results of the interaction.


First, draw the layout


Center the book, bar text relative to the top left corner of the book, and set alpha=0 to get ready. If the project is based on 2.3, use the NineOldroid library to set transparency in your code.

Specify the scope of the search. In this case, the scope is a custom View, called PathSearch, slightly larger than the book.




Declare brushes and paths, and search icon materials

Specify a good animation path, let the search icon around the center of the circle can be, next we will achieve through the code, we first draw the path in the code.


[java]
view plain
copy
print
?

  1. <span style=“white-space:pre”>  </span>Paint mPaint;  
  2. <span style=“white-space:pre”>  </span>Path mPath;  
  3. <span style=“white-space:pre”>  </span>Bitmap mBitmap;   

	Paint mPaint;
	Path mPath;
	Bitmap mBitmap;Copy the code

[java]
view plain
copy
print
?

  1. mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);  
  2. mPaint.setStyle(Paint.Style.STROKE);  
  3. mPaint.setColor(Color.GREEN);  
  4.   
  5. mPath=new Path();  
  6. mBitmap= BitmapFactory.decodeResource(context.getResources(), R.drawable.wel_search);  

	mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
	mPaint.setStyle(Paint.Style.STROKE);
	mPaint.setColor(Color.GREEN);

	mPath=new Path();
	mBitmap= BitmapFactory.decodeResource(context.getResources(), R.drawable.wel_search);Copy the code


Next, draw a circle in the center, using an API for Path



Add the specified arc to the path as a new contour.

[java]
view plain
copy
print
?

  1. public void addArc(RectF oval, float startAngle, float sweepAngle)   

    public void addArc(RectF oval, float startAngle, float sweepAngle)Copy the code


-RectF circle top left and bottom right positions, constructor (floatLeft, float Top, float right, float bottom)

-startAngle Specifies the Angle from which to start drawing

-sweepAngle how many degrees to draw


Take a picture to get a sense of what it means

If we specify RectF, then we can figure out the range of the circle. The red circle is used only as a marker range.


Assuming we set startAngle to 0 and sweepAngle to 90, it will look like this. When the sweepAngle is set to 360 degrees, we get the entire circle.




In order to calculate the position of RectF, we can construct a picture in our mind. After visualization, we can see that left and right are in 1/4 position of the box, and bottom and right are in 3/4 position of the box

RectF can be derived by overwriting onSizeChanged at this point

[java]
view plain
copy
print
?

  1. int distance=w/4; // Distance = width divided by 4;  
  2. RectF rectF=new RectF(distance,distance,distance*3,distance*3);   

int distance=w/4; // Distance = width divided by 4; RectF rectF=new RectF(distance,distance,distance*3,distance*3);Copy the code


Four, draw the scope of the provisions through API



At this point we can place the search icon on it, and since the search icon in this example starts in the lower right corner,

So we set startAngle to 45 and sweepAngle to 360 to rotate the icon around the circle and call mpath. addArc(rectF,45,360); Methods.

Now that we have the path, how to make the search icon move along the path can be accomplished by using PathMeasure and attribute animation.

PathMeasure can be understood as turning your Path into a straight line and providing the length and coordinates of each point. Let’s take a picture to feel it.


Declaration, measurement



[java]
view plain
copy
print
?

  1. PathMeasure mPathMeasure;      

    PathMeasure mPathMeasure;	Copy the code
[java]
view plain
copy
print
?

  1. mPathMeasure=new PathMeasure(mPath,true);   

    mPathMeasure=new PathMeasure(mPath,true);Copy the code



5. Now you can finish the animation


Get the length of the Path by using mPathMeasure mPathMeasure.getLength(). Let’s do this in conjunction with property animation.

Declares an array to hold the coordinates of each point.



[java]
view plain
copy
print
?

  1. <span style=“white-space:pre”>  </span>float[] pos=new  float[2];   

   	float[] pos=new float[2];Copy the code

[java]
view plain
copy
print
?

  1. <span style=“white-space:pre”>  </span>ValueAnimator valueAnimatorCompat= ValueAnimator.ofFloat(0,mPathMeasure.getLength());  
  2.     valueAnimatorCompat.setDuration(1200);/ / a lap 1.2 S  
  3.     valueAnimatorCompat.setStartDelay(500);// Start animation after 0.5s delay  
  4.     valueAnimatorCompat.setInterpolator(new DecelerateInterpolator());// Decelerate differential  
  5.     valueAnimatorCompat.setRepeatCount(1);// Repeat the Settings once  
  6.   
  7.     // How to get the coordinates of different times, we need to listen for the Update of the animation  
  8.   
  9.     valueAnimatorCompat.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  
  10.         @Override  
  11.         public void onAnimationUpdate(ValueAnimator animation) {  
  12.                 float value= (float) animation.getAnimatedValue(); // Get the position between 0 and mpathMeasure.getLength ()  
  13.               
  14.                 mPathMeasure.getPosTan(value,pos,null);// Obtain the x and y coordinates of the position stored in pos  
  15.               
  16.                 postInvalidate();// Tell the UI to draw  
  17.          }  
  18.     });  

	ValueAnimator valueAnimatorCompat= ValueAnimator.ofFloat(0,mPathMeasure.getLength()); valueAnimatorCompat.setDuration(1200); / / a lap 1.2 S valueAnimatorCompat. SetStartDelay (500); / / delay 0.5 S start animation valueAnimatorCompat setInterpolator (new DecelerateInterpolator ()); / / slow difference, valueAnimatorCompat setRepeatCount (1); / / / / set repeated 1 time how to get at different times of the coordinates, we need to monitor the Update of animation valueAnimatorCompat. AddUpdateListener (new ValueAnimator. AnimatorUpdateListener ()  { @Override public void onAnimationUpdate(ValueAnimator animation) { float value= (float) animation.getAnimatedValue(); Mpathmeasure.getpostan (value,pos,null); PostInvalidate (); postInvalidate(); // tell UI to draw}});Copy the code


Vi.
onDraw
Draw picture position

To get the search image to the bottom right of the path, the calculated coordinates are subtracted by half the width and height of the image

canvas.drawBitmap(mBitmap,pos[0]-mBitmap.getWidth()/2,pos[1]-mBitmap.getHeight()/2,mPaint);



7. Finally, the content of the text bar can be displayed by listening to the completion of the property animation.

Source:

https://github.com/vvinner/PathSearchs


u★★★★★★ useful words Star aboutU u u u u u u u u

Extension:

Add view:http://blog.csdn.net/dqmj2/article/details/51721193 on any View