JavaScript uniform animation and buffering animation detailed _javascript tips

About the animation in the webpage, we already can use some properties to make quickly in the CSS3, but sometimes for the compatibility of the browser we still need to use JS to make the animation of the webpage.

Use JS to do animation The most important function is setinterval function, here no longer repeat, do not understand the direct use of Baidu. This article mainly tells the animation principle already in the production process main point.

The old rules, the first code, can be directly read to 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) {//To use the timer, first clear the Timer//a box can only have a timer, so the words, and other boxes will not have a timer conflict//And the timer itself said 
    A property of the box Clearinterval (Ele.timer); 
    We require the box to be both forward and backward, then we have to have a positive negative//target value if it is greater than the current value, if the target value is less than the current value negative var speed = target>ele.offsetleft?3:-3; 
      Ele.timer = setinterval (function () {//The difference between the current value and the target value before execution var val = target-ele.offsetleft; 
      Ele.style.left = ele.offsetleft + speed + "px"; 
      The target value and the current value are only difference if less than the step, then no further forward//Because the step has positive negative, all convert to absolute value to compare Console.log (Val); if (Math.Abs (val) <=math.abs (speed)) {Ele.style.left = target+ "px"; 
 
      Clearinterval (Ele.timer); 
  }},30); }//Ease animation encapsulation function Animate2 (ele,target) {clearinterval (Ele.timer);//Clear History Timer Ele.timer = SetInterval (f 
      Unction () {///Get step length to determine the moving direction (positive or negative) step size should be smaller, more easing algorithm. 
      var step = (target-ele.offsetleft)/10; Two processing of the step size (greater than 0 to take the whole, less than 0 to take the whole) steps = step>0? 
      Math.ceil (STEP): Math.floor (step); 
      Animation principle: The target position = current position + step console.log. 
      Ele.style.left = ele.offsetleft + step + "px"; Detect if the easing animation has no stop if (Math.Abs (target-ele.offsetleft) <=math.abs (step) {Ele.style.left = target + "px";//Direct 
      Move the specified position clearinterval (ele.timer); 
  }},30); 
 } 
 
 
}

HTML and CSS is basically for our JS part of the frame, do not speak too much, we should pay attention to the global margin and padding clear zero, otherwise he in the calculation of the initial margin and padding will affect the calculation, resulting in sometimes the movement does not stop the situation.

JavaScript part of the code parsing in the source has been very detailed, the following main explanation principle.

Motion

We control the distance of every millisecond motion through the setinterval function, and then, when we are about to arrive at the specified position, judge the step (the distance of every millisecond movement) and the distance between this and the target position, if the step is greater than the distance between this and the target position, direct to the target position, This is done in order to avoid errors where the length and total distance are not integer multiples, resulting in a difference between the final arrival position and the target position.

Buffer movement:

The basic function of buffering motion is the same as uniform motion, but the step of the buffer movement is determined by the distance from the target position, so that our step size is constantly getting smaller, thus the effect of buffering motion is realized. In determining the step size, we use Math.ceil and Math.floor to rounding the step value to avoid decimals, because if the last place to arrive after the decimal number is definitely the same as the target location error.

Note: Be sure to use clearinterval to clear the timer before each move starts.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.