一步步教你弹性框架-上篇
HTML5学堂：本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧，有一种回弹的效果，在网站中的一些特效当中还是有一些应用的。实现弹性运动框架的核心在于速度的控制。本篇文章从第一步开始，讲解如何让元素动起来，以及如何实现无休止的来回运动~
先来看最终效果：
基础功能以及前期准备
样式与结构代码
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5 - 弹性框架 - HTML5学堂 独行冰海 梦幻雪冰</title>
-
<link rel="stylesheet" href="../common/reset.css">
-
<style>
-
#btn {
-
width: 150px;
-
height: 40px;
-
line-height: 40px;
-
background: rgba(0, 0, 0, 0.6);
-
color: #fff;
-
-webkit-border-radius: 5px;
-
-moz-border-radius: 5px;
-
border-radius: 5px;
-
}
-
.box {
-
width: 600px;
-
height: 100px;
-
background: #666;
-
text-align: center;
-
line-height: 100px;
-
font-size: 36px;
-
font-weight: bold;
-
text-shadow: 0 0 2px #fff,
-
0 0 5px #fff,
-
0 0 8px #fff,
-
0 0 10px #fff;
-
}
-
.target {
-
width: 100px;
-
height: 100px;
-
background:#39f;
-
text-align: center;
-
color: #fff;
-
font: 24px/100px bold;
-
}
-
</style>
-
</head>
-
<body>
-
<input type="button" id="btn" value="点击运动">
-
<div class="target" id="move">运动块</div>
-
<div class="box">HTML5学堂 www.h5course.com</div>
-
</body>
-
</html>
获取完成版样式的功能函数
需要明确，我们使用原生进行代码书写时，需要注意，应当基于获取完成样式的功能代码。即我们之后的功能会使用到如下函数。
-
/*
-
* 功能：获取渲染后标签的样式，element是标签的对象，property是标签样式属性值
-
* 参数：element是元素对象，property是样式属性
-
* demo：getStyle(move, "marginLeft");
-
* author：HTML5学堂
-
*/
-
function getStyle(element, property){
-
var proValue = null;
-
if (!document.defaultView) {
-
proValue = element.currentStyle[property];
-
} else {
-
proValue = document.defaultView.getComputedStyle(element)[property];
-
}
-
return proValue;
-
}
第一步 让元素自动运动起来
我们希望在点击按钮的时候，元素能够实现运动。那么我们首先是获取运动以及控制运动的“主人公”，并为控制运动的“主人公”绑定运动的功能函数，然后通过改变某一种样式值使其发生变化。别忘了计时器哦~
-
var btn = document.getElementById("btn"); // 获取控制按钮
-
var move = document.getElementById("move"); // 获取运动块
-
var timer = null; // 初始化一个计时器
-
var speed = 1; // 初始化一个速度
-
var startVal = parseInt(getStyle(move, "marginLeft")); // 获取初始位置
-
-
btn.onclick = function () {
-
timer = setInterval(function(){
-
startVal += speed;
-
move.style.marginLeft = startVal + "px"; // 通过修改marginLeft实现块向右运动
-
}, 24);
-
}
欢迎沟通交流~HTML5学堂
第二步：无休止的往复运动
能够来回运动的关键在于速度的变化
之前的一些特效当中，我们通常是要求块达到临界值的时候停止运动，而这次我们是让其超过去，再运动回来，经过几次的反弹最终停止在临界值的位置，因此我们绝对不可能直接判断是否到达临界值然后清除计时器。先不要心急，先一步步来，我们第二步来实现块相对临界值，进行左右来回的运动。
左右来回的运动：从初始位置向右运动到临界值（假设运动了600像素），然后继续运动相应的距离（600像素），停止下来再向左运动，越过临界值到达初始状态，如此反复。
效果如图：
先来创建一个变量用于存储目标值。之后我们一起来想，之所以能如此运动，在于速度在发生变化，从初始值到目标值的过程中，速度从0开始往上增加，越来越大，越过目标值到达最右侧位置的过程中，速度越来越小，直到速度值变为0，则停止运动，之后继续变小，成为负值，就从右侧开始向左运动。
修改代码：将初始化的速度置为0。之后在每次运动的时候均进行目标值与当前值的关系判断，如果当前值小于目标值，速度应该是增加，如果当前值大于目标值，速度应该变小。
-
var btn = document.getElementById("btn"); // 获取控制按钮
-
var move = document.getElementById("move"); // 获取运动块
-
var timer = null; // 初始化一个计时器
-
var speed = 0; // 初始化一个速度
-
var startVal = parseInt(getStyle(move, "marginLeft")); // 获取初始位置
-
var targetVal = 600; // new~！ 新增一个变量，用于存储目标值
-
-
btn.onclick = function () {
-
timer = setInterval(function(){
-
if (startVal < targetVal) {
-
speed++;
-
} else if (startVal > targetVal) {
-
speed--;
-
};
-
startVal += speed;
-
move.innerHTML = "速度：" + speed + "\n当前位置：" + startVal; // 测试用代码-便于理解
-
move.style.marginLeft = startVal + "px"; // 通过修改marginLeft实现块向右运动
-
}, 24);
-
}
为方便查看，特意在运动块中增加了速度变化的状态。同时，下面文字是HTML5学堂的块是作为参照物存在的，其宽度就是600像素。
能够看出，速度值的变化是从0 ——> 最大值 ——> 0 ——> 最小值 ——> 0
对应位置的变化则是：左 ——> 中 ——> 右 ——> 中 ——> 左
到此，我们能够实现一个无休止的运动。在下一篇文章当中我们将为大家讲解，如何将运动变为缓冲运动，再在此基础上“构建”有摩擦力的运动（越来越慢~~~）。提示是：在速度的控制上想办法。
欢迎沟通交流~HTML5学堂
极客编程技术分享
