36. JS animation

We used CSS Achieved animation effect  https://blog.csdn.net/potato123232/category_11644821.html 30,31,32, Now we use JS Realization

Catalog

1   Animation principle

2   A little bit of the above animation process bug

3   Jog animation

4   Moving between multiple targets

5   Callback function for animation

5.1   Reuse callback function

5.2   Do not reuse callback functions

---

1   Animation principle

js The principle of animation is through the timer setInterval() Constantly modify the style of the box

For example, you want to make a box move , Just let him rub away pixel by pixel

Let's take a look at one first

After running, you will find that the box will move from the left , Move to 400 The position of will stop

Sometimes several elements use similar animations , Encapsulating animation into a function will make the code look simpler , Let's simply encapsulate the above function

Functions like the above can throw out three parameters Perform object , distance , Speed

Now let's use

It is found that it can move normally

2   A little bit of the above animation process bug

If you follow the above words, it is OK to execute once , Now let's make a button , Let's click the button , Animation will execute

The box didn't move when opening the page

You can reach the designated position normally with only one click

But when I click the button many times during the animation , Then the red box will go right at a very fast speed , And will exceed the distance limit

This is because every time we click the button, we will set a timer , We can cancel the last timer every time we click the button

After ordering many times, he won't have the situation just now

When the red box reaches its position , Click the button again , It will still go a little further , At this time, we add judgment , If it is less than the distance, add the timer , If it is not less than the distance, do nothing

• The reason why we will still move forward here is ,section Relative positioning is used , If you use relative positioning, it won't go any further

3   Jog animation

The slow effect is to make the box walk slower , The principle is that the distance of each movement decreases as the distance between the box and the target decreases

Although the effect is not very obvious , But it does perform deceleration

But there will be a little problem , Its final position is not accurate

So let's make a small change

Note here If you want to move to the specified location , Then you must use absolute position , If relative position is used , Each step is relative to your previous position , That will never be possible

There are several reasons for rounding here

• Our destination is an integer , If it's not an integer, don't round it
• If you don't round , It goes by decimal every time ,（ Decimal of the remaining distance - Decimal of step ） Rediving 10, The number of decimal places will be more and more , The farther the distance, the less accurate
• Reasons for rounding up rather than down , You want an extreme situation , Now you are still far from the finish line 9px, You divide by 10 Then you should go 0.9px, At this time, if you round down , Then the message you get is to go 0px, So he can't move until he gets to the designated position , If you round up, there will be no such problem

4   Moving between multiple targets

Now we add two buttons , After a click, go to 500px, After another click, go to 800px

First click 500 Button , Discovery can succeed

Click again 800 Button , It can be found from 500 Go to the 800

This is where I click again 500 Button , Find that you can't come back , Now we want it back , We need to cancel the judgment here

So it can come back

Because our positioning is absolute , So the judgment here is canceled , The box will not move again after clicking when it reaches the position

It will have a problem when it comes back , It goes to 509 It stops

This is because we are going in a negative direction , And rounded up , Walk to just move -0. A few px When , Get straight to 0, I can't walk

This is what we can do to step Judge

If you go straight, round it up , If you go negative, round it down . In this way, whether it is positive or negative, there is no problem

5   Callback function for animation

Callback function means that the return value is another function , Our recursive idea can be realized by callback function

5.1   Reuse callback function

Now we want the element to be in 200 and 500 Move back and forth between , We can write this way

So it arrives 200 Then you can move repeatedly , If you don't want to start with 0 Move to 200 The process of , Then you put your initial position on 200px Just fine

5.2   Do not reuse callback functions

If you want to execute a non repeating callback function , So you can write like this

So when it reaches the designated position, it will turn red