High energy ahead, old driver ~ this article address, reproduced please specify blog.csdn.net/mr_immortal…

Summary of a.

I believe that people who have used Path app will be attracted by its beautiful effect. As a user, the first thing I was attracted by path app is the jelly effect similar to ios after its timeline drop-down refresh. And as a coder, we should be curious about how it works. As a result, in baidu’s guidance, and what gains, since so, that by our own masturbation!

Let’s take a look at the difference between our own animations and path’s original ones. (Pay attention to the jelly effect of the ball oh (∩_∩)O)

The effect is quite good. The following began the journey of the code ~

Analysis of two.

The ball moves around, so we wouldn’t be stupid enough to draw a circle instead. Now you need three Bezier curves to draw the circle. I’m not going to tell you how to draw circles. You can take a look at this great god wrote www.jianshu.com/p/791d3a791… Very helpful!

Now go on. (I assume you have learned the circle drawing technique.Studying studying) ‘)

OK, so let’s say we already have a circle

Left left left

See the dropdown effect of path:

  1. During the pull-down, if the pull-down distance is lower than a certain value, release will directly reset to the normal state (in the pull-down process, the width above the vertical line decreases, while the width below remains unchanged, and the width of the ball decreases within a certain pull-down range).
  2. If the pull-down distance is greater than A certain value, the ball (circle) moves down to A certain position A
  3. If the ball continues to pull down after moving to position A, the ball and the vertical line move down at the same time with the same distance between them
  4. In the pull-down process, the width of the vertical line decreases, but the width of the vertical line remains unchanged

→ Follow this line of thought. Let’s talk about our solution. When we pull down, the related coordinates of P1, P1. left and P1. right change — > cause the ball to be stretched. P2, P2. left, P2. right, P4. left and p4.right change — > cause the width of the ball to become smaller, and use the simple harmonic vibration function to cause the ball to rebound. To keep the ball and vertical line moving down at the same time with the same distance, use layout to change

See the reset effect of path:

After the reset, the ball can rebound and jitter

In fact, with the previous pull-down analysis, the reset is almost similar. The only thing to note is that if the ball continues to pull down after moving to position A, the reset position is not 0 but (- the distance that the ball continues to pull down after moving to position A), which needs careful attention.

The logical process is as follows.

3. Implement

The pullscrollView THAT I’m using here is a pullscrollView that I found online and I made some minor changes to it. (Admittedly, the pullscrollView is buggy, but I’ll do it for the sake of demonstration, you can use your favorite pullscrollView instead.)

Pullscrollview: The main method is doActionMove(MotionEvent Event)

If (deltaY * 0.5f * SCROLL_RATIO > getResources().getDimension(r.timen.jellyball_pullmax)) { //LogUtil.m("State.REFRESH"); mState = State.REFRESH; }... . if (isMoving) { ... . mContentView.layout(mContentRect.left, top, mContentRect.right, bottom); Mheader.layout (mHeader.getLeft(), mCurrentTop, mHeader.getright (), mCurrentBottom); . . }Copy the code

There are comments in the code, it is very easy to understand, no explanation, you can download the code to see. So just to clarify, I’ve defined three interfaces in the pullScrollView

public interface OnTurnListener {
        
        public void onPull(float y);
        
        public void onUp(float y);
        
        public void onRefresh();
    }Copy the code

It is the Y from these three interfaces that allows Jellyball to operate according to how far it slides, decoupling Jellyball from any pull-down refresh library.

———————————- here is the dividing line ——————————————-

And now for jellyball!

The first is a whole bunch of variables



Basic initialization is then performed to get the data needed for the variable

The setPullHeight and setUpHeight functions are commented in the images and will not be described here. (I feel the image looks better than the posted code, so the code is basically posted ‘(∩_∩)’)

SetPullHeight method

SetUpHeight method

Ondraw drawing method



The bridge between setPullHeight, setUpHeight and ondraw is the setType method, which invalidates () after each setting. Do an ondraw redraw operation

SetType’s startRebounceAnim method is animated because it takes advantage of applyTransformation, which automatically calculates the elapsed time ratio at this point in time specified in setDuration. This saves us the trouble of calculating ourselves (of course, if you don’t like this method, you can also write a timer and calculate the elapsed time ratio yourself).

After getting rebounceInterpolatedTime, our bounceback method is used in the rebounceAction method of the ondraw method.



The method in turn calls a series of these methods

These methods, as the name implies, are designed to get the rebound distance based on the time lapse ratio. So the question is, how do you make a rebound distance go from big to small to zero? Sine and cosine? NO! If you look at the graph of the function, it doesn’t change from big to small (although it eventually goes to zero). So what’s the answer? My answer is simple harmonic vibrational function (how do I know that? Baidu… .). The address is www.jcodecraeer.com/IOS/2015/06… You can go and study it.

Here I post the main methods

5 in the formula is equivalent to the damping coefficient, and the smaller the value, the greater the amplitude; 30 in this formula corresponds to the oscillation frequency, and the higher the number, the more oscillations.

You can see here in real time according to the function image at www.desmos.com/calculator

The function I used is ((1 – math. exp(-2 * (x + 0.052)) * math. cos(20 * (x + 0.052))) -1) * rebounceX / 3 * 2 Need + 0.052 x because when I test formula on the www.desmos.com/calculator website to see when x = 0.052, the formula for the value is 0, if x = 0, the calculation value is not zero (that is, when we actually have offset formula value, this is not what we want.) Which is + 0.052 x, not x – 0.052, I think it must ask your high school math teacher: : > _ < : : < = “” p =” “>

Screenshots, write code to write a long string, finally is the effect we want to masturbate! Give yourself a thumbs up! ❤

Four. Use method

It’s super easy to use, three lines of code. (Because I’ve wrapped all the logical operations into Jellyball, you can easily use your own drop-down refresh library by capturing and exposing the interfaces for your drop-down refresh library and reset and refresh!)

In Mainacitivty

Five. Code download

The code might be a bit messy, so next time I’ll update the code again by making the ball refresh look like path refresh.

Download code: github.com/ImmortalZ/j… If you feel good, I hope you can star, fork, as an encouragement to me, thank you first ‘(∩_∩)’ any questions welcome to comment, I hope you can give advice, let my little brother grow up!