一步步教你弹性框架-中篇

HTML5学堂：本文继续为大家讲解弹性框架，在前一篇文章当中，我们实现了最基本的来回运动，在本文当中我们将基于前者，继续书写我们的代码。主要包括缓冲效果、有摩擦力的运动以及计时器的清除三个部分。在本文之后也将能够实现基本的弹性动画效果。

第三步 将运动处理成缓冲效果

缓冲效果其实是与速度相关的，在我们课程中的动画框架中其实也讲过——速度 = (目标值 - 当前值) / 步长。此处我们就不再做详细讲解了，直接上代码：

1. var btn = document.getElementById("btn");    // 获取控制按钮
2. var move = document.getElementById("move");    // 获取运动块
3. var timer = null;    // 初始化一个计时器
4. var speed = 0;    // 初始化一个速度
5. var startVal = parseInt(getStyle(move, "marginLeft"));    // 获取初始位置
6. var targetVal = 600;    // new~！ 新增一个变量，用于存储目标值
7.  
8. btn.onclick = function () {
9.     timer = setInterval(function(){
10.         speed += (targetVal - startVal) / 40;
11.  
12.         startVal += speed;
13.         move.innerHTML = "速度：" + speed + "\n当前位置：" + startVal;    // 测试用代码-便于理解
14.         move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
15.     }, 24);
16. }

当前的效果：

之所以采用缓冲运动，就是让运动呈现先慢后快再慢的视觉效果。

PS：对于基本结构与样式代码，在我们前一篇文章——一步步教你弹性运动框架（上）中有书写，可直接点击查看。

第四步 运动的摩擦力？

在实现缓冲之后，最核心的一点就是如何让速度在当前这种“先慢后快再慢”的效果上，还要越来越慢。换到我们生活当中，其实就相当于是一个物体在地面运动，必然会存在摩擦力。这种摩擦力怎么实现出来呢？

听上去好像很难的样子，自己在最初思考这个问题的时候其实也是有些纳闷，不过当想到方法的时候，突然就恍然大悟了~方法很简单——将速度乘以一个小于1的数字~~~

所以，只需要为获取到的speed再执行一句代码即可

1. var btn = document.getElementById("btn");    // 获取控制按钮
2. var move = document.getElementById("move");    // 获取运动块
3. var timer = null;    // 初始化一个计时器
4. var speed = 0;    // 初始化一个速度
5. var startVal = parseInt(getStyle(move, "marginLeft"));    // 获取初始位置
6. var targetVal = 600;    // new~！ 新增一个变量，用于存储目标值
7.  
8. btn.onclick = function () {
9.     timer = setInterval(function(){
10.         speed += (targetVal - startVal) / 40;
11.         speed *= 0.95;
12.         startVal += speed;
13.         move.innerHTML = "速度：" + speed + "\n当前位置：" + startVal;    // 测试用代码-便于理解
14.         move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
15.     }, 24);
16. }

PS：增加的代码是“speed *= 0.95;”

当前的效果：

已经出现回弹的效果了，果断离成功不远喽~~~

欢迎沟通交流~HTML5学堂

第五步 计时器还是要清除的

从上面的效果中也能看出，计时器是一直没有停下来的~

关于清除条件的确是需要思考一下滴~是不是当前值等于终点值呢？果断不是（反弹的效果会在前几次运动时经过终点值）。那，是不是速度为0呢？貌似也不是（最左端和最右端也是速度为0）。但是，我们将这两个条件结合起来貌似就可以了~同时满足如下两个条件：1、速度达到某个值；2、终点值与当前位置的差值也达到某个值。

需要增加如下代码

1. if (Math.abs(speed) < 1 && Math.abs(startVal - targetVal) < 1) {
2.     clearInterval(timer);
3.     startVal = targetVal;
4. };

解释一下上面的代码，当速度值绝对值小于1且当前位置距离终点位置小于1的时候，我们把计时器清除掉，并将目标值赋值给当前值。这个部分的操作，能够防止出现抖动现象，防止误差叠加-属性值的取整问题。这个时候我们就能发现，计时器最终被清除掉了。

当前的完整JavaScript代码

1. var btn = document.getElementById("btn");    // 获取控制按钮
2. var move = document.getElementById("move");    // 获取运动块
3. var timer = null;    // 初始化一个计时器
4. var speed = 0;    // 初始化一个速度
5. var startVal = parseInt(getStyle(move, "marginLeft"));    // 获取初始位置
6. var targetVal = 600;    // new~！ 新增一个变量，用于存储目标值
7.  
8. btn.onclick = function () {
9.     timer = setInterval(function(){
10.         speed += (targetVal - startVal) / 40;
11.         speed *= 0.95;
12.         startVal += speed;
13.         
14.         if (Math.abs(speed) < 1 && Math.abs(startVal - targetVal) < 1) {
15.             clearInterval(timer);
16.             startVal = targetVal;
17.         };
18.  
19.         move.innerHTML = "速度：" + speed + "\n当前位置：" + startVal;    // 测试用代码-便于理解
20.         move.style.marginLeft = startVal + "px";    // 通过修改marginLeft实现块向右运动
21.     }, 24);
22. }

到此，我们能够其实已经实现了基本的弹性框架功能，唯一不足的就在于我们的代码扩展性不够好，在下一篇文章当中，我们将会完成弹性运动框架的收尾工作 —— 完善优化，提升扩展性。

欢迎沟通交流~HTML5学堂