Animation function encapsulation
Animation implementation principle:
Core principle: continuously move the box through the timer setInterval()
Implementation steps:
- Gets the current position of the box
- Add a movement distance to the box's current position
- Repeat this operation with a timer
- Add a condition for end timing
- Note that this element needs to add positioning before you can use element.style.left
<style> div { position: absolute; width: 100px; height: 100px; background-color: aquamarine; } </style> </head> <body> <div></div> <script> var div = document.querySelector("div"); var timer = setInterval(function () { if (div.offsetLeft >= 400) { //Stopping the animation stops the timer clearInterval(timer); } div.style.left = div.offsetLeft + 1 + "px"; }, 30); </script> </body>Encapsulation of animation functions
//Encapsulation obj target object target position of animation function function animate(obj, target) { var timer = setInterval(function () { if (obj.offsetLeft >= target) { //Stopping the animation stops the timer clearInterval(timer); } obj.style.left = obj.offsetLeft + 1 + "px"; }, 30); }Call:
//Call function var div = document.querySelector("div"); animate(div, 300);Animation functions record different timers for different elements
Core principle: JS is a dynamic language, which can easily add attributes to the current object
//Record different timers for different elements function animate(obj, target) { obj.timer = setInterval(function () { if (obj.offsetLeft >= target) { //Stopping the animation stops the timer clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + 1 + "px"; }, 30); } var div = document.querySelector("div"); animate(div, 300);However, if the click event animation is set to start, if the button is clicked continuously, the speed of the corresponding element will be faster and faster, because too many timers are turned on.
resolvent:
Let the element have only one timer. First clear the previous timer and only keep the current timer for execution//Record different timers for different elements function animate(obj, target) { //First clear the previous timer and only keep the current timer for execution clearInterval(obj.timer); obj.timer = setInterval(function () { ........ }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 position is equal to the target position
Uniform Animation: box's current position + fixed value
Jog Animation: box current position + (target value - current position) / 10
<style> div { width: 200px; height: 200px; background: blueviolet; position: absolute; } </style> </head> <body> <button class="go">Click to 500</button> <button class="back">Click to 800</button> <div></div> <script> var btnGo = document.querySelector(".go"); var btnBack = document.querySelector(".back"); var div = document.querySelector("div"); btnGo.addEventListener("click", function () { animate(div, 500); }); btnBack.addEventListener("click", function () { animate(div, 800); }); function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { //The step value is written to the timer //Take the step value as an integer and round it up Math.ceil() var step = (target - obj.offsetLeft) / 10; //Considering that it may retreat, it will be negative, step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { 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"; }, 15); } </script> </body>Add callback function to animation function
Callback function principle: a function can be used as a parameter to transfer this function as a parameter to another function. After that function is executed, the function passed in is executed. This process is called callback.
Position of callback function: the position where the timer ends.function animate(obj, target,callback) { //Callback = callback() when function() {} is called .............. if (obj.offsetLeft == target) { clearInterval(obj.timer); //The callback function is written to the end of the timer if (callback) { //Call function callback(); } } } btnGo.addEventListener("click", function () { animate(div, 500, function () { alert('how are you'); //This function will not be called until the previous animation is completed. How are you }); }); //Three parameters, and the last parameter is the functionThe animation functions are encapsulated in a separate JS file
Because this animation function will often be used in the future, it can be encapsulated in a JS file separately, and the JS file can be referenced when using it
JS documents are as follows:function animate(obj, target, callback) { //Callback = callback() when function() {} is called clearInterval(obj.timer); obj.timer = setInterval(function () { //The step value is written to the timer //Take the step value as an integer and round it up Math.ceil() var step = (target - obj.offsetLeft) / 10; //Considering that it may retreat, it will be negative, step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); //The callback function is written to the end of the timer if (callback) { //Call function 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); }