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

之前有介绍过弹幕的写法，原理就是利用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)