介绍几种运动——匀速、加速、缓冲、弹性

之前有介绍过弹幕的写法，原理就是利用left值的变化，产生运动。
今天我们再来写几种运动：匀速、加速、缓冲、弹性。

效果图：

html就很简单了，我们还是花时间来看一下js的代码。

  <div id='first' class='div-model first'>匀速</div>
  <div id='second' class='div-model second'>缓冲</div>
  <div id='third' class='div-model third'>加速</div>
  <div class='div-model four' id="four">弹性</div>
  <button id='btn' class="btn">开始进行运动</button>

匀速运动是最简单的一个，当left的值小于500的时候，加一个定时器，每20毫秒left值加10px；

    //匀速运动
    var lastPx = 500;
    var first = $('first');
    var timer = setInterval(function() {
        var firstLeft = parseInt(first.style.left);
        firstLeft = isNaN(firstLeft) ? 0 : firstLeft;
        if (firstLeft >= lastPx) {
          clearInterval(timer);
          return;
        }
        first.style.left = firstLeft + 10 + 'px';
      }, 20)

缓冲运动，即先加速，后减速直至到达目的地。原理是取到left值，500减去left值再除以8，得到一个speed，如果left+speed小于500就加一个定时器，每50毫秒让left等于这个数值。

   var lastPx = 500;
      //缓冲运动
    var second = $('second');
    var speed1 = 0;
    var timer2 = setInterval(function() {
      var secondLeft = parseInt(second.style.left);
      secondLeft = isNaN(secondLeft) ? 0 : secondLeft;
      var speed = (lastPx - secondLeft) / 8;
      speed = Math.ceil(speed);   // 向上取整

      if (secondLeft + speed >= lastPx) {
        clearInterval(timer2);
        second.style.left = '500px'
        return;
      }
      second.style.left = secondLeft + speed + 'px';

    }, 50)

ceil是向上取整的意思。

有了上面的例子，加速运动就很简单了。没50毫秒，使left的值+1；

    var lastPx = 500;
    //加速运动
    var third = $('third');
    var speed = 1;
    var timer3 = setInterval(function() {
        var thirdLeft = parseInt(third.style.left);
        thirdLeft = isNaN(thirdLeft) ? 0 : thirdLeft;
        if (thirdLeft + speed >= 500) {
          clearInterval(timer3);
          third.style.left = '500px'
          return;
        }
        third.style.left = thirdLeft + speed + 'px';
        speed += 1;
      }, 50)

弹性运动就是到达目的地后，抖三抖啊抖三抖。首先要判断是否到达目的地，若left值大于500，则让speed值为负，left+负的speed值，就往回运动，此时就没到达目的地，让speed的值为正，继续往前运动。形成弹性的效果。

    var lastPx = 500;
      //弹性运动
    var four = $('four');
    var count = 20;
    var speed4 = 19;
    var timer4 = setInterval(function() {
      var fourLeft = parseInt(four.style.left);
      fourLeft = isNaN(fourLeft) ? 0 : fourLeft;
      four.style.left = fourLeft + speed4 + 'px';
      if (count == 0) {
        four.style.left = lastPx + 'px';
        clearInterval(timer4);
      }
      if (fourLeft > lastPx) {
        speed4 = 0 - speed4;
        count--;
      }
    }, 20)