1. Animation function encapsulation
1.1 animation implementation principle
Core principle: continuously move the box position through the timer setInterval().
Implementation steps:
- Get the current position of the box.
- Add 1 movement distance to the box's current position.
- Use the timer to repeat this operation continuously.
- Add a condition to end the timer.
- Note that this element needs to add positioning to use element.style.left.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation principle</title>
<style>
div {
position: absolute;
top: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function () {
if (div.offsetLeft >= 400) {
// Stopping animation is essentially stopping the timer
clearInterval(timer);
}
div.style.left = div.offsetLeft + 5 + 'px';
}, 30);
</script>
</body>
</html>
1.2 simple encapsulation of animation functions
Note that the function needs to pass two parameters, the animated object and the distance to move.
// Simple animation function encapsulates obj target object target position
function animate(obj, target) {
var timer = setInterval(function () {
if (obj.offsetLeft >= target) {
// Stopping animation is essentially stopping the timer
clearInterval(timer);
}
obj.style.left = div.offsetLeft + 5 + 'px';
}, 30);
}
1.3 animation functions add different timers to different elements
If multiple elements use this animation function, var must declare the timer each time. We can use different timers for different elements (we use our own timers).
Core principle: JS is a dynamic language, which can easily add attributes to the current object.
// Simple animation function encapsulates obj target object target position
// Different timing is assigned to different elements
function animate(obj, target) {
// When we keep clicking on the button, the speed of this element will be faster and faster, because too many timers are turned on
// The solution is to let our element have only one timer to execute
// First clear the previous timer and only keep the current timer for execution
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
// Stopping animation is essentially stopping the timer
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
};
1.4 principle of retarding effect
Slow motion animation is to change the movement speed of elements. The most common is to stop the speed slowly
Idea:
- Let the distance of each movement of the box slowly decrease, and the speed will slowly fall down.
- Core algorithm: (target value - current position) / 10 as the distance step of each movement
- The condition for stopping is to stop the timer when the current box position is equal to the target position
- Note that the step value needs to be rounded
function animate(obj, target) {
// First clear the previous timer and only keep the current timer for execution
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// The step value is written into the timer
// Change our step value to an integer to avoid the problem of decimals (rounding up, such as 8.1 to 9)
var step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft == target) {
// Stopping animation is essentially stopping the timer
clearInterval(obj.timer);
}
// Change the step value of adding 1 each time to a slowly decreasing value step formula: (target value - current position) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
1.5 animation function moves between multiple target values
You can move animation functions from 800 to 500.
When we click the button, we judge whether the step size is positive or negative
- If it is positive, the step size is rounded up
- If it is negative, the step size is rounded down
var step = (target - obj.offsetLeft) / 10; // Determine whether the step size is positive or negative // If it is a positive value, the step size will be rounded up (round up Math.ceil(), such as 8.1 to 9) // If it is a negative value, the step size will be rounded down to the smaller value (rounded down to Math,floor(), e.g. - 8.1 to - 8) step = step > 0 ? Math.ceil(step) : Math.floor(step);
1.6 complete animation encapsulation function
(1) Add callback function to animation function
Callback function principle: function can be used as a parameter. This function is passed as a parameter to another function. When that function is executed, the passed function is executed. This process is called callback.
Write position of callback function: the position where the timer ends.
(2) The animation functions are encapsulated in a separate JS file
Because this animation function is often used in the future, it can be encapsulated in a JS file separately, and the JS file can be referenced when using it.
- Create a new JS file separately.
- HTML files import JS files.
(3) Complete animation encapsulation function
// Jog animation function encapsulates obj target object target position
// Idea:
// 1. Let the distance of each movement of the box slowly decrease, and the speed will slowly fall down.
// 2. Core algorithm: (target value - current position) / 10 as the distance step of each movement
// 3. Stop condition: stop the timer when the current box position is equal to the target position
function animate(obj, target, callback) {
// console.log(callback); callback = function() {}; callback() when calling
// First clear the previous timer and only keep the current timer for execution
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// The step value is written into the timer
// Change our step value to an integer without the problem of decimals
var step = (target - obj.offsetLeft) / 10;
// Determine whether the step size is positive or negative
// If it is a positive value, the step size will be rounded up (round up Math.ceil(), such as 8.1 to 9)
// If it is a negative value, the step size will be rounded down to the smaller value (rounded down to Math,floor(), e.g. - 8.1 to - 8)
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// Stopping animation is essentially stopping the timer
clearInterval(obj.timer);
// The callback function is written to the end of the timer
// if (callback) {
// //Call function
// callback();
// }
// Logic interrupt
callback && callback();
}
// Change the step value of adding 1 each time to a slowly decreasing value step formula: (target value - current position) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}