**1. 一直对jQuery中的animate感兴趣,虽然经常使用,但是一直没有研究过原理,后来发现jQuery也可以使用easing.js库,就决心研究一下原生js怎么调用Easing库,比如说BounceOut效果。
像平时所用的echarts和chart.js都用到了缓动函数库easing,还有其他的控件等等,其实原理都一样,连函数都一样。
Easing原理我也不过多描述了,简单理解就是想象一个直角坐标系,x轴就是时间比例(把运行时间分割成一片一片的,所占的比例percent),y轴就是位移,通过我下面的例子就能更好的了解Y轴是什么。其实网上也有大把的介绍,各位大神们都做了阐述,也就不过多赘述。大家可以参考http://easings.net/zh-cn这个地址。
下面就是例子:
```
1. function animate2(element, endValue, duration) {
var startTime = new Date();
var startValue = parseInt(element.style.width);
var timerId = setInterval(function() {
var percentage = (new Date - startTime) / duration;
var stepValue = startValue + (endValue - startValue) * Bo