The author:Zhang Xinxu



Original statement:This article is produced by YFE members of the Reading front team, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.









Characters in this episode:Zhang Xiao Shi, Bo Bo, Shen Guan, A Kun, Firefly



Guest guest:Kevin



Special thanks to:Kangkang rabbit

The night was getting dark, after the routine task, “Zhang Xiaoshi” and his teammates did not rush back to “Wow Wonderful College” as before, because this was the last task before the Chinese New Year, and when we returned to the college, we may have to temporarily respectively for a period of time. We’ve been fighting hard enough for a year, so we thought we’d find a place to relax. “Why don’t we go to Qingyun restaurant for a roast rabbit?” Bobo suggested, “Good!” Everyone hit it off!

“Restaurant” qingyun located qing-yun yu at the foot of the mountain, interconnected by the Xiao Ding 14 years, chef named Kevin, baking skills known of the rabbit, freshly baked now to eat, but Kevin is not to, are freshly baked apprentices, unless it is “reading” royalty such important people or the large businessman didn’t have this treatment.

Of course, “Zhang xiaoshi” a line of people to eat roast rabbit is simply eat roast rabbit, did not think and see the legend of the chef Zhang Xiaofan, more no luxury zhang Xiaofan will personally roast rabbits for such a few ordinary guests. But what happened on this day was completely beyond anyone’s expectations.

“Bobo” skill is [character protection], that is, the mission of the complete strategy to pick up 100% of the treasure. But in many cases, the items found seem to be fake, such as “elfstone with 100% diarrhea after taking”, “bathing suit that melts in water” and “Hair regeneration lotion for hair loss”, which are not practical and are sold.

But, this time, it seems to be an explosion…

Everyone sat in a private room, ordered a large roast rabbit and chatted while waiting for the chef to appear. Soon, the door of the private room opened and a handsome figure appeared, wearing a high chef’s hat, pushing a whole rabbit grill into the room. Everything was natural. But just as the cook looked up, a sharp horn sounded, and they all looked at each other, and a voice from somewhere said, “You… Is that legend than Song Zhongji handsome than Li Yifeng also cool cooking superb “Qingyun restaurant” big headed, Zhang Xiaofan?”

The cook smiled and said nothing. “Yes, it must be you! One of my “akun” memory palace skills is photographic memory. You were in the picture when We started Reading Nation two years ago.”

“Oh, no…” Everyone looked at each other in surprise. Because now this situation is the same as eating hot pot in Xue Zhiqian’s hot pot restaurant. But Xue Zhiqian serves you personally. People can’t believe it and start asking for signatures.

“Everybody is a little safe, again delay missed rabbit meat best barbecue time, we might as well first full appetite, signature of the matter can wait for rabbit meat roast again not too late, I do not know whether?”

“Yes, you can,” the official said, waving his hand to keep everyone quiet.

Then the chef began his masterful roast rabbit…

At this point, “Bobo” could not resist, asked: “Excuse me, are you shooting a reality show now? Why else would a great man like you roast a rabbit for us himself?”

“Well, ashamed to say,” chef to delimit the rabbit cut while said, “I have six disciples, to the New Year, now the guest is less, there are two people I let him go home, the remaining three disciple, a constipation eat diarrhea the fairy stone, many days not control the quantity, pull to the waist are straight up; Another disciple was even worse. His girlfriend wore a bathing suit given by him to go to a mixed hot spring, but the bathing suit melted away. As a result, he had to kneel on the barbecue all night, and his leg was ruined. Another disciple lost his hair so badly that his hat could not be covered. We caterers were most afraid of hair in food, so I could only let him rest for a few days. The last disciple did not have anything to do, but he handled the guests all by himself during the day. He was so tired that he could not see how many legs the rabbit had. So, now I have to go on my own, rest assured, the price is normal.” Then he smiled again.

“Oh ~~” “bobo” thoughtfully answer way, like suddenly thought of what.

Delimit well, see cook thumb and forefinger cross into a heart, form a heart gesture, and then gently pinch, a white flame from the finger.

This skill, everyone in an uproar, you know, to want to “spring force” directly into flames but very rare very high order skills, this chef ignition so easily skilled, the strength behind the fear is unfathomable. More convinced, this person is Zhang Xiaofan.

Then, I saw a snap of fingers gently fingertips flame disappeared, instead grill below a thin layer of flame, all is such a small fire, strange looks temperature is not high also, how to bake a rabbit, chef suddenly printing solutions, speed, average looks just like the palm of your hand once again, ability can see a solution, but I don’t know the details, Only Akun can see the order of the seal unseal by using the memory Palace skill. Then, a long stretch of “spring power” to the grill below the flame ran, I saw the flame immediately spiritual, the rabbit slowly surrounded, yellow and white flames regularly around the rabbit body clockwise slowly rotating.

“How impressive! Perceptive “get up gas” could not help but sigh, “the power of spring” put out is very difficult, usually see put out are direct strong, did not think it could be so fast slow, at the same time gather and do not come loose, this is more difficult than “firefly” [laser put out] ah!”

“I’m flattered! Chef appear very easily, and then said, “it” spring force of “slow moving skills outside look is very complex, in fact it is not difficult to learn, and benefits are not only is a good way to control temperature, I know that you often have to grasp the elf, if the” force of spring “is too rigid, too brute force, in addition to waste your effort, also can drive the other elves out and run away, So, for your daily work is also very helpful. I don’t know if you are interested in learning, I can teach you on site, and the reward is…

Boon, in “wow very great institute” in the story square good propaganda my “qingyun restaurant”, do not know clinch a deal deny?”

“Good!” “Everyone replied in unison.

“Well, it just takes some time for the rabbit to finish roasting, so we can chat and change while waiting,” the chef said leisurely as he released the long but thick “spring force”.

“I acquired this skill when I was young…”

Super simple slow moving small algorithm to make the interaction bright

The principle is as follows:

Suppose you want to go from position A to position B, and if it’s A rigid linear motion, you’re going the same distance each time; If it’s a slow motion, the distance is different each time. So how can it be different? It’s very simple. Just scale it.

For example: move half of the remaining distance each time.

Right? It’s super easy to understand

For example, if the distance between you and the grill is 64 and you move half way every second, then the distance between you is 32 in the next second, 16 in the next second, then 8, then 4, then 2, then 1, then… You’re together. The process you have together is a typical slow motion process, as shown in Figure 1:


It can be expressed in a simple formula:

A = A + ( B - A ) / 2
Copy the code

Translation:

My next second position = present position \+ half the distance between now and the grillCopy the code

Doesn’t make sense.

And A=A+(B-A)/2 is the little plug and play algorithm THAT I’m going to share with you.

We can use requestAnimationFrame. For browsers that do not support this, we can use the following compatible code:

/ / requestAnimationFrame compatible to deal with the if (window. RequestAnimationFrame {requestAnimationFrame = function (fn) {setTimeout (fn, 17). }; }Copy the code

Then, the actual ratio of easing won’t be 2, it could be 3 or 4 or something, which is also a variable, so the complete core algorithm formula is:

A = A + ( B - A ) / rate
Copy the code

Thus, the slow release effect of our fire-roasted rabbit can be represented by the following code:

Var fireToRabbit = function() {var A = 64, B = 0, rate = 2; var top = function() { A = A + ( B - A ) / rate; If (A < 1) {distance = B; return; } distance = A; / / the movement gogogo! requestAnimationFrame(top); }; top(); };Copy the code

In theory, equal proportion approach will only be infinitely close, but not truly equal, that is, the motion will never end. Therefore, a critical judgment needs to be made, that is, when the distance is small to a certain number, directly equal to the target value and terminate the animation. For example, above, when the distance from the grill is less than 1, the movement stops and the “spring power” is released to create a flame.

if( A < 1 ) {    
    distance = B;    
    return;
}
Copy the code

Our recently released version of the back to the top effect of the starting mobile station (see Figure 2) uses this small easing algorithm.


Of course, this is not the only place where station M uses this small animation algorithm. For example, the small ball recently read on the home page can be moved, and the inertial motion animation effect is used by this algorithm, as well as the page turning effect when the book reading page is in horizontal reading mode (see Figure 3). It’s also used a lot in vertical mode when you click to flip and so on.


This algorithm is very simple and often used in more than one place in a project, so the problem is that it would be very verbose to write requestAnimationFrame and boundary determination every time you slow down, so we can change the algorithm to something like this:

Math.easeout=function(A,B,rate,callback){ if( A == B || typeof A ! = 'number') { return; } B = B || 0; rate = rate || 2; var step = function() { A=A+(B-A)/rate; if( A < 1 ) { callback(B,true); return; } callback(A,false); requestAnimationFrame(step); }; step(); };Copy the code

Among them:

  • A is the starting position;
  • B is the target position.
  • Rate is the slow rate;
  • Callback is a variable position callback with two arguments, value and isEnding, indicating the current position value (value) and whether the animation is over (Boolean).

Thus, our return to the top effect can be used like this:

var doc = document.body.scrollTop ? document.body : document.documentElement; Math. Easeout (doc. The scrollTop, 0, 4, the function (value) {doc. ScrollTop = value; });Copy the code

And you can see it’s just as good. More importantly, our algorithm is much easier to reuse, which means that whether it’s pokemon hunting or grilling, it’s very easy to use, plug and play.

In fact, there are more comprehensive tween.js easing algorithms, but this algorithm is based on time, whereas the math.easeout algorithm I just showed is based on the easing rate, and the final time is not fixed, depending on the distance between the starting and ending positions, which is why. The slow motion animation algorithm in this paper is easier to understand and remember, because the distance in the real world is real and easy to perceive, while the time is illusory and impossible to capture. It just maps to the algorithm in this paper, which is distance-driven rather than time-driven, and is easy to form a consensus.

“Boon, these, do not know everybody listens to after have what feeling?”

“That’s amazing! “Small teacher zhang” can not help listening to the thumbs up, “it can be said, listen to your words ten years! Did not expect you not only cooking, the “power of the spring” control of technology is so superb, and then admire the ground, ashamed!”

“Ha ha, that’s good, promise me don’t forget to oh”, then cook right hand wrist, to appear in the hands of one pot synthesis, a left hand, and the flame suddenly like rabbit body such as the cloud around the sun is like a lost breathing, moment only a slightly curled up, a thin layer of white at the bottom of the fire, then the right hand with a shock, jar all bursts with powdered object, Palm down, and then quickly turn it over, hands are empty, only just bursts with seasonings like time stopped imprison dangling over the palm of your hand, in fact, the seasoning is hand sends out “the force of spring” wrapped up, the sensing and control technology, can top and college was comparable to the “product surveyors”. Then, I saw the five fingers as gently as paddling water, seasoning powder slowly spread out, faint seems to be guided by five lines, evenly around and sequently adsorbed around the rabbit body, and issued a gentle sizzling sound, soon all the seasoning powder exactly evenly scattered.

Everyone was thought is over can eat, all of a sudden, the chef left hand stroked the pinch, then suddenly open, push forward, the flame of a thin layer of idleness, originally under suddenly like a dragon, as a “bomb”, deflagration rapidly and accurately speaking should be glorious salamander, all around are burning red flame fiery serpent, rabbit tightly wound up.

This came all of a sudden, spectacular scenery, a lot of people here were amazed silence, just as ready to aftertaste, chef left hand suddenly closed, salamanders; suddenly going away without a trace, at the same time, the rabbit body around the seasoning powder also disappeared without a trace, whole room is only the cooling oil fire sizzling and dissipation around mood.according rabbit meat aroma.

“Ok, ready to eat!”

Everyone was so excited that they immediately picked up their mobile phones to take photos of nostalgia, and then instantly became hungry wolves, ignoring the mouth of the mouth has been salivating saliva, rushed to the innocent rabbit……

That night, we all shed tears, not because of the separation, not because of learning a new slow moving skills, but that outside the tender taste of the coke, but not scattered fragrance really let a person can not stop. Every bite, my taste buds have to accept the provocation of one wave after another, and I feel like WANDERING in the clouds, wandering between heaven and earth. It is really delicious to cry, moved to tears.

PS: For the worldview and background of this story, see GitHub

For more sharing, please follow wechat official account YFE: