Detailed explanation of JavaScript uniform animation and buffer animation-JS Tutorial-php.cn

Detailed explanation of JavaScript uniform animation and buffer animation

高洛峰

Release： 2016-12-09 15:21:36

Original

1515 people have browsed it

Regarding animations in web pages, in CSS3 we can already use some attributes to quickly create them, but sometimes for browser compatibility we still need to use js to create animations in web pages.

The most important function when using js for animation is the setInterval function. I won’t go into details here. If you don’t understand, you can use it directly in Baidu. This article mainly talks about the principles of animation and the key points in the production process.

The old rule is to start with the code first. If you can understand it directly, you can save time.

html part:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>move</title>
  <link rel="stylesheet" href="move1.css">
</head>
<body>
  <input type="button" value="匀速移动" id="move1">
  <input type="button" value="渐变移动" id="move2">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <script type="text/javascript" src="move1.js"></script>
</body>
</html>

Copy after login

css part:

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

Copy after login

js part:

/**
 * Created by siri on 2016/9/10.
 */
window.onload=function () {
  var btn1 = document.getElementById(&#39;move1&#39;);
  var btn2 = document.getElementById(&#39;move2&#39;);
  var box1 = document.getElementById(&#39;box1&#39;);
  var box2 = document.getElementById(&#39;box2&#39;);
  btn1.onclick = function () {
    animate1(box1,500);
  }
  btn2.onclick = function () {
    animate2(box2,500);
  }
  //匀速动画
  function animate1(ele,target){
    //要用定时器，先清除定时器
    //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
    //而定时器本身讲成为盒子的一个属性
    clearInterval(ele.timer);
    //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
    //目标值如果大于当前值取正，目标值如果小于当前值取负
    var speed = target>ele.offsetLeft?3:-3;
    ele.timer = setInterval(function () {
      //在执行之前就获取当前值和目标值之差
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      //目标值和当前值只差如果小于步长，那么就不能再前进了
      //因为步长有正有负，所有转换成绝对值来比较
      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); //清楚历史定时器
    ele.timer = setInterval(function () {
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。
      var step = (target-ele.offsetLeft)/10;
      //对步长进行二次加工(大于0向上取整,小于0项下取整)
      step = step>0?Math.ceil(step):Math.floor(step);
      //动画原理： 目标位置 = 当前位置 + 步长
      console.log(step);
      ele.style.left = ele.offsetLeft + step + "px";
      //检测缓动动画有没有停止
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
        ele.style.left = target + "px"; //直接移动指定位置
        clearInterval(ele.timer);
      }
    },30);
  }
  
  
}

Copy after login

html and css are basically the framework for our js part, don’t talk too much, please pay attention What is important is that the global margin and padding must be cleared, otherwise the initial margin and padding will affect the calculation during calculation, resulting in sometimes non-stop motion.

The analysis of the JavaScript part of the code is already very detailed in the source code. The following mainly explains the principles.

Uniform motion:

Through the setInterval function, we control the distance of movement every few milliseconds, and then when we are about to reach the specified position, we determine the step length (distance of movement every few milliseconds) and the distance between this time and the target position. If the step length is greater than the distance to the target position at this time, it will be positioned directly to the target position. This is to avoid the error that the step length and the total distance are not integer multiples, resulting in a difference between the final arrival position and the target position.

Buffering motion:

The basic function of buffering motion is the same as that of uniform motion, except that the step length of buffering motion is determined by the distance from the target position, so that our step length is constantly getting smaller, thus Achieve the effect of buffering motion. When determining the step size, we use Math.ceil and Math.floor to round the step value to avoid decimals, because if there are decimals, the last position reached will definitely be different from the target position.

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