Blog address

http://www.jianshu.com/u/51d1fd73fb72

Open source address

https://github.com/lygttpod/AndroidCustomView/blob/master/app/src/main/java/com/allen/androidcustomview/widget/DragBallV iew.java

The article directories

  • preface

  • Draw the starting circle

  • Draw the connecting band according to bezier curve

  • Handles the onTouchEvent event

  • Animation, icing on the cake

  • Set pieces

0

preface

I haven’t written this article for a long time. I was busy with the code reconstruction of the project for a while. Now I have some time to bring you a custom View about animation learning: the effect similar to QQ message drag and drop.

Actually QQ was updated when I haven’t noticed this little red dot can be drag and drop, inadvertently found later after playing with for a long time, then feel the effect is quite good play, had an idea to achieve such an effect, haven’t to do a variety of reasons, among even the past promises of cash today.

Actually online already has a lot of such data, also have the ready-made demo, but most of the interpretation of detailed enough, a lot of calculation is listed a formula to draw a sketch in a blur, for us these math bad people mentally, ok, few words said that this article will show you the calculation process of intermediate lifetimes.

Before we start, I suggest that you open QQ to familiarize yourself with the drag effect, and then comb your way to achieve it according to your own knowledge, including the realization of the middle sticky effect.

Let’s take a look at the end result of this article

Let me analyze my understanding of the implementation process: The first is to draw a circle, in a certain position to specify when finger to this round draw a circle, can according to the position of finger with the moving of the finger two circles gradually separation, separation of the two middle of a circle in the process of connecting with, with the increase of both round and pitch, radius and expand or narrow, according to a certain proportion coefficient when more than the critical initial round disappear, Only the circle where the finger is, then the finger opens the circle and disappears.

Let’s follow the above steps to begin the code

1

Draw the starting circle

Of course, we’re going to implement initialization code that defines constants, brushes, etc. I’m not going to show you

You should be familiar with drawing circles, one line of code, pass in the center coordinates, radius, brush

Initialize some constants. We’ll show you with the center of the screen as the center of the circle

So we draw a circle in the center of the screen

2

Draw the connecting band according to bezier curve

This is the focus of this article, the calculation process will be very detailed, easy to understand

Let’s see what it looks like and then analyze it, okay

So we know how to draw two circles, and now we’re going to analyze the implementation of the joining band, and you can see that it’s a smooth transition, and that’s the perfect radian for bezier, so let’s just review what a Bezier curve looks like, okay

See this effect is not knowing smile, this is the effect that we want

Take a look at one of the most detailed illustrations (complete with a proud face) I’ve ever drawn on the web.

Note: one of the angles in the diagram is wrong. TanEAS1 should be tanESS1. Since apostrophes cannot be marked in MD syntax, apostrophes are replaced by 1, e.g. A ‘=A1

To further understand what I mean in the following diagram:

The starting circle is defined as the circle S(short for Start), and the corresponding center coordinate is S(Sx,Sy). The drag circle, or the end circle, is defined as the circle E(short for end), and the center coordinate is E(Ex,Ey). The path of the connecting strip can be seen from the figure as follows: A–>O–>B–>C–>O–>D–>A, where O is the control point of AOB and COD, two second-order Bezier curves. The green line in the figure indicates five angles, which are equal and can be obtained according to the correlation theorem of triangles. In order to fully explain that this is the most detailed explanation in history, Let me give you an example of why the angles are equal. If you are good at math, you can skip this paragraph. Angle ASA1+ A1SE=90 degrees =A1SE+ESD1 can be derived from Angle ASA1=ESD1.

Given the starting center S(Sx,Sy) and the ending center E(Ex,Ey),E is the position where the finger slides, which can be obtained according to event.getx () and event.gety ().

We take Angle ESS1 as an example to calculate: TanESS1 =tanA=S1E/SS1=(ex-sx)/(ey-sy)=rate, rate is the slope of this Angle, and then according to the inverse tangent, we get Angle A, A=arctan(rate), this is the inverse tangent formula, if you forget it, you can go to The Search engine.

Knowing the Angle A, we can calculate the coordinates of each point according to the Angle plus the sines and cosines function. I have written the calculation process on the diagram, and I will use the code to realize the above calculation process below.

So that’s the end of the Bezier curve, and I’m going to put the circles in a series, and I’m going to see what it looks like, and I’m going to put the coordinates of the end circle in one place and see what it looks like, and I’m going to make it STROKE so that I can see the path that I’m drawing, okay

This is the same as our expectation. After calculating for most of the day, we did not calculate in vain, so we hurried to have a cigarette to release the nervous mood when calculating just now (for fear of making mistakes), and came back to stabilize our mood and continue to go down.

3

Handles the onTouchEvent event

3.1 Handling ACTION_DOWN Events

When the finger is pressed down, we need to determine whether the finger is on the starting circle. It only works when the finger is pressed on the starting circle and then dragged. Remember the variable mIsCanDrag that we defined at the beginning of the article

3.2 Handling ACTION_MOVE Events

The premise of move is to press your finger on the starting point circle, and then take out the coordinate of the moving point position according to your finger sliding, which is the coordinate of the dragging end circle.

Then know the coordinates of the starting point coordinates and the end of round can be concluded that need the coordinates of each point, two round the pitch can be calculated, and then according to the center distance and can drag coefficient of the ratio of maximum distance to set two round radius, when dragging the distance we exceeded the maximum range by changing the state to control only drag the circle, Otherwise draw the two circles and the middle band, as the code below makes clear.

Let’s see what happens when WE get to this step

We find that the circle does not disappear or reset when the finger is released, because we have not yet come out of the up event.

3.3 Handling ACTION_UP Events

When the finger is lifted, we should judge whether the distance between the center of the end circle and the starting circle exceeds the set maximum distance. If not, restore the dragging state and keep only one starting circle. If it exceeds the maximum distance, the circle will disappear.

Let’s look at the effect again

See here the core code is almost complete, but something is not perfect, oh, animation, without some animation effect looks so stiff, we will come out when the fingers leave the animation.

4

Animation, icing on the cake

BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator BounceInterpolator And by adding the callback method when the draggable range is exceeded and the release disappears, we can come out of our business logic when it disappears.



Run down the code and see what happens

And that’s not too cool, so I’m just going to go to FILL_AND_STROKE and see what happens.

We can further refine this by adding numbers in the middle of the circle for message effect.


The pursuit of perfect people see here will surely say disappear a little animation, right, on the QQ disappear when a bubble bursting feeling, this in a couple of different state diagram, and animation to order can be achieved, because I do not have pictures this resources did not demonstrate this, animation to write a lot easier than attribute animation.

5

Set pieces

This article is just to play a role in the introduction of the role, just lead you step by step to achieve the drag effect, how to use in the project, you can write according to their own needs, there are several online I simply listed here.

  1. Fixed the custom view size to the size of the circle, displayed in the desired position, removed the view from the current layout when the user touches the view, used windowManage to addView(View) to add our dragable view to the Window layer, spread the screen, Note the initial position positioning can be achieved.

  2. Place a circular textView where the number of messages is displayed, as the initial circle, hide it when pressed, add our view to the Window layer and drag accordingly.

Of course, you have better methods and ideas. You are welcome to comment below and tell us your implementation method so that we can benefit from it. Sharing is a virtue.

Sharing is a virtue, share your plan, let everyone learn, common progress, welcome to contribute.

Today’s recommendation

2017 Android plug-in Framework summary