Detailed description of javascript uniform speed animation and buffer animation, and detailed description of javascript uniform speed

Detailed description of javascript uniform speed animation and buffer animation, and detailed description of javascript uniform speed

We can use some attributes to quickly create animations on webpages in css3, but sometimes we still need to use js to make animations on webpages for browser compatibility.

One of the most important functions for animation using js is the setInterval function. I will not go into details here. I don't know how to use Baidu directly. This article focuses on the main points in the production process of animation principles.

Old Rules: Code first, which can be understood directly, can save time.

Html section:

<! DOCTYPE html> 
Css section:

*{   margin: 0px;   padding: 0px; } .box{   width: 100px;   height: 100px;   background-color: green;   position: relative;   margin-top: 10px; } 
Js section:

/*** Created by siri on 2016/9/10. */window. onload = function () {var btn1 = document. getElementById ('move1'); var btn2 = document. getElementById ('move2'); var box1 = document. getElementById ('box1'); var box2 = document. getElementById ('box2 '); btn1.onclick = function () {animate1 (box1, 500);} btn2.onclick = function () {animate2 (box2, 500 );} // constant speed animation function animate1 (ele, target) {// use a timer to clear the timer first/ /A box can only have one timer. In this way, the timer will not conflict with other boxes. // The timer itself becomes an attribute of the box clearInterval (ele. timer); // if we require the box to be both forward and backward, then our step must have positive and negative values. // if the target value is greater than the current value, if the target value is less than the current value, take negative var speed = target> ele. offsetLeft? 3:-3; ele. timer = setInterval (function () {// get the difference between the current value and the target value before execution var val = target-ele. offsetLeft; ele. style. left = ele. offsetLeft + speed + "px"; // if the difference between the target value and the current value is smaller than the step size, you cannot move forward. // because the step size has positive and negative values, convert all values to absolute values to compare the console. log (val); if (Math. abs (val) <= Math. abs (speed) {ele. style. left = target + "px"; clearInterval (ele. timer) ;}}, 30) ;}// function animate2 (ele, target) {clearInterval (ele. timer); // clear the historical timer ele.. Timer = setInterval (function () {// get the step size to determine the moving direction (positive and negative value) step size should be smaller and smaller, slow algorithm. Var step = (target-ele.offsetLeft)/10; // The step size for secondary processing (greater than 0 rounded up, less than 0 rounded down) step = step> 0? Math. ceil (step): Math. floor (step); // animation principle: Target Position = Current Position + step console. log (step); ele. style. left = ele. offsetLeft + step + "px"; // checks whether the animation is stopped if (Math. abs (target-ele.offsetLeft) <= Math. abs (step) {ele. style. left = target + "px"; // directly move the specified location clearInterval (ele. timer) ;}}, 30 );}}
Html and css are basically used to build a framework for the js part. We should not talk too much about it. Note that we must clear the global margin and padding, otherwise, the initial margin and padding During computation will affect the computation, and sometimes the motion will not stop.
The parsing of some javascript code has been very detailed in the source code. The following describes the principle.

Constant speed:

Using the setInterval function, we can control the movement distance per millisecond. Then, when we reach the specified position, we can determine the step (the movement distance per millisecond) and the distance between this time and the target location, if the step size is greater than the distance between the current and the target location, it is directly located at the target location, in this way, the difference between the final arrival position and the target position is avoided because the step size and the total distance are not integer multiples.
Buffer movement:

The basic function of the buffer movement is the same as that of the constant speed, but the step size of the buffer movement is determined by the distance from the target position, so that our step size keeps decreasing, this achieves the buffering effect. When determining the step size, we use Math. ceil and Math. floor performs an integer on the step value to avoid decimals, because if there is a decimal followed by the final arrival position, there must be an error with the target position.

Note:Use clearInterval to clear the timer before each movement starts.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.