Shulou(Shulou.com)06/02 Report--

How to understand the encapsulation and use of JavaScript slow animation, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Implementation process analysis

(1) how to repeat the call?

Answer: encapsulate a function and call it one at a time

Code analysis:

Function animate (obj, target, callback) {/ / detailed implementation steps}

Animate: (animation function)

Obj (animated objects): to whom to add animation effects

Target (target value): what distance to move to

Callback (callback function): what functions should be performed at the same time

(2) how to achieve the moderation effect? (core algorithm of slow animation)

Answer: moving distance = (target value-current box position) / 10, the moving distance will slowly decrease until it stops, and the slow-moving principle will be realized.

Code analysis:

Var step = (target-obj.offsetLeft) / 10

Step (moving distance): the distance to move the element

Target (target value): what distance to move to

Obj.offsetLeft (where the box is now): the distance from the left side of the box now

(3) Why can't it move to the specified position? (the target distance given is 500px. It stops when you move to 496.4.)

Answer: because it needs to be rounded, positive numbers are rounded up and negative numbers are rounded down.

Code analysis:

Step = step > 0? Math.ceil (step): Math.floor (step)

If the distance that setp wants to move is positive, round it up, if it is negative, round it down, and adopt a ternary expression to optimize the code and improve the overall quality.

(4) how to make the target element really move?

A: add a timer and assign the real-time movement distance (step) to the element

Code analysis:

Var timer = setInterval (function () {/ / detailed implementation code}, 15); / / add timer obj.style.left = obj.offsetLeft + step + 'px'; / / step size

1. Add a name to the timer in order to clear the timer, and the time is set to 15 (commonly used in actual development)

two。 The value on the left side of the element = the distance from the left of the element + moving distance + 'px' (remember to add px units). The principle is to constantly assign the latest values to the element to achieve the effect of moving.

(5) Why are there ghosts and animals or getting faster and faster?

A: because the timer is added repeatedly, the timer needs to be cleared each time it is called.

Code analysis:

ClearInterval (timer)

There are two places that need to be cleared. the first is to avoid ghosts and breakers when you just call the slow animation function, and the second is to judge whether the element has reached the specified position, and stop the timer if it does.

Case test: Document .sliderbar {/ * width: 240px; * / * height: 40px; * / / * parent box positioning according to actual requirements * / position: absolute; right: 0; top: 100px; text-align: center; line-height: 40px / * display: block; * / width: 40px; height: 40px; cursor: pointer;} .sp {position: relative; color: # fff } .con {/ * floats in the parent box when absolute positioning is set * / position: absolute; left: 0; top: 0; width: 200px; height: 40px; background-color: pink; z-index:-1; color: # fff } ← problem feedback var sliderbar = document.querySelector ('.sliderbar'); / / var sp = document.querySelector ('.sp'); var con = document.querySelector ('.con'); sliderbar.addEventListener ('mouseenter', function () {/ / animate (obj, target, callback) Animate (con,-160,function () {sliderbar.children [0] [xss_clean] = '→';}) sliderbar.addEventListener ('mouseleave', function () {/ / animate (obj, target, callback) Animate (con, 0, function () {sliderbar.children [0] [xss_clean] = '←';});})

Overall idea: call the animation function by adding mouse events to the box to achieve the final effect

Running effect:

The slow animation function finally encapsulates the code (animate.js):

Function animate (obj, target, callback) {

/ / clear the timer once when calling the function to avoid problems

ClearInterval (obj.timer)

/ / add timer

Obj.timer = setInterval (function () {

/ / the step value is written into the timer and changed to an integer (rounded up)

Var step = (target-obj.offsetLeft) / 10

/ / integers are taken as large numbers and negative numbers as small ones.

Step = step > 0? Math.ceil (step): Math.floor (step)

If (obj.offsetLeft = = target) {

/ / stop the timer if you have reached the specified position

ClearInterval (obj.timer)

/ / the callback function is written after the timer ends.

Callback & & callback ()

}

/ / change the value of adding one step at a time to a value that gradually decreases.

Obj.style.left = obj.offsetLeft + step + 'px'

}, 15)

}

After reading the above, have you mastered how to understand the encapsulation and use of JavaScript slow animation? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.