Hello，我是江工大初学者。今天要讲的是运动。
源码已上传至github, 需要的小伙伴可以去下载 https://github.com/17714574361/js-linear-motion_1
既然讲到运动，我们先看一个问题，物体运动原理是什么，知道吗，我知道你肯定不知道。物体的运动原理是：通过改变物体的位置，而发生移动变化。没错，就是这几个字。
那么我们怎样才能再代码中设置运动呢？我们要给运动的设置定位属性，然后通过设置left值、top值来改变物体运动的位置。
好的。我们先看怎么来一个匀速运动。
匀速运动
既然是匀速运动，我们先设置一个总路程，假设是600，当我们点击按钮的时候，我们先清除老的定时器（否则在运动的时候多次点击按钮就会加速运行，速度会越来越快），然后再开启一个新的定时器，间隔时间设置为50ms（你可以修改自己喜欢的时间间隔），然后我们再设置一个速度，每隔50ms走多少路程，这样每次50ms box的运动距离，即left值为box距离左边的距离+这个速度。当box运动到终点是要干嘛，还要继续运动吗？当然是不需要，这是我们只要将box的left值设为总路程即可，这样运动就停止了，然后在清除定时器。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动</title>
<script src="utils.js"></script>
<script src="linear.js"></script>
<link rel="stylesheet" href="linear.css">
</head>
<body>
<button id="start">start</button>
<div id="box"></div>
</body>
</html>
css代码：
#box {
width: 100px;
height: 100px;
background: seagreen;
position: absolute;
left: 0;
top: 50px;
}
js代码：
window.onload = function () {
let start = $("start");
let box = $("box");
//总路程
const TOTAL_DISTANCE = 600;
//速度，每50ms走多少路程
const SPEED = 15;
start.onclick = function () {
//清除老的定时器，box.timer就是我们给box添加一个自定义属性
clearInterval(box.timer);
//开启一个新的定时器
box.timer = setInterval(function () {
box.style.left = box.offsetLeft + SPEED + "px";
//如果box的left值大于总路程，则设置总路程，
//并清除定时器，若不清除定时器，
//就会一直运行此段代码，这样会减少性能；
if (Number.parseInt(getStyle(box, "left")) > TOTAL_DISTANCE) {
box.style.left = TOTAL_DISTANCE + "px";
clearInterval(box.timer);
}
}, 50);
}
}
//工具类↓↓↓
//获取id
function $(id) {
return document.getElementById(id);
}
//获取样式，返回值是带px的字符串
function getStyle(element, attr) {
return element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr];
}
折返运动
折返运动就是往返运动，先运动到终点，再折回来起点，再运动到终点，这就是折返运动，整个思路更匀速运动来时一样的，先清除老的定时器，原因一样，再开启新的定时器。关键是核心代码，怎么才能折回来呢？在匀速运动的基础上，当运动到终点的时候，我们可以减去速度。直接看代码吧！这里的代码只是js代码不一样，其他和匀速运动一样，相同的工具类代码我也不贴了。
js代码：
window.onload = function () {
let start = $("start");
let box = $("box");
//总路程
const TOTAL_DISTANCE = 600;
//速度
let SPEED = 15;
//最小路程,代码世界中可以为负数
const MIN_DISTANCE = 0;
start.onclick = function () {
//清除老的定时器
clearInterval(box.timer);
box.timer = setInterval(function () {
//设置速度
box.style.left = box.offsetLeft + SPEED + "px";
/** 当box距离左侧的距离 >= 总路程的时候，就把速度 * -1
* 这样下一次就是减去这个速度
* box.offsetLeft不能写box的left值,写了left值后就会一直抖动
*
*/
if (box.offsetLeft >= TOTAL_DISTANCE) {
SPEED *= -1;
}
//当box距离左侧距离 <= 最小距离是，就把速度 * -1
//这样下一次就是加上这个速度
if (box.offsetLeft <= MIN_DISTANCE) {
SPEED *= -1;
}
}, 50);
}
}
//此处将这个获得样式的方法改了下，返回结果为number类型的数值
function getStyle(element, attr) {
let result = element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr];
return Number.parseInt(result);
}
缓冲运动
什么是缓冲运动，缓冲运动就是由加速到减速就是缓冲运动，也叫减速运动。
缓冲运动的思路：我们依然需要总路程和速度，只不过此时的速度不一样，会发生变化，那么我们就要考虑怎样才能让速度发生变化，我们可以将总路程分为8段（你可以设置成你自己喜欢的段位），然后通过剩下的路程/8计算出速度，而且这里的速度还不一样，我们可以看图。
buffer1.png
当物体运动到A的位置时，剩下的路程restDistance/8 和 当物体运动到B的位置时，剩下的路程restDistance/8，可以发现当restDistance的值越小时，速度也越小，这样我们可以让速度越来越小。剩下的路程怎么算呢？剩下的路程restDistance = 总路程 - box.offsetLeft。好了，这样就解决了
html,css,工具类代码都一样，所以直接贴js代码
window.onload = function () {
let start = $("start");
let box = $("box");
//总路程
const TOTAL_DISTANCE = 600;
start.onclick = function () {
//清除老的定时器
clearInterval(box.timer);
//开启新的定时器
box.timer = setInterval(function () {
//获得当前box的left值
let currentPosition = getStyle(box, "left");
//速度=剩下的路程/8，8为8段
let speed = (TOTAL_DISTANCE - currentPosition) / 8;
box.style.left = box.offsetLeft + speed + "px";
if (box.offsetLeft >= TOTAL_DISTANCE) {
BOX.style.left = TOTAL_DISTANCE + "px";
clearInterval(box.timer);
}
}, 50);
}
}
加速运动
加速运动刚好与缓冲运动相反
buffer2.png
从图中可以发现，运动到A处时，物体A距离左侧的距离是offsetLeft，运动到B处时，物体B距离左侧距离是offsetLeft，速度就可以这么算，speed= offsetLeft / 8，这样就发现offsetLeft越大时，speed就越大，这样物体物体就可做加速运动了，但是有个问题，当offsetLeft<4时，物体时动不了的，这是js的精准度问题，所以至少要是4开始（我的代码写了5）
window.onload = function () {
let start = $("start");
let box = $("box");
//总路程
const TOTAL_DISTANCE = 600;
start.onclick = function () {
//清除老的定时器
clearInterval(box.timer);
//开启新的定时器
box.timer = setInterval(function () {
//获得当前box的left值
let currentPosition = getStyle(box, "left");
//速度=物体距离左侧的距离/8，8为8段，从0开始不起效，直到4开始有用
let speed = (currentPosition + 4) / 8;
box.style.left = box.offsetLeft + speed + "px";
if (box.offsetLeft >= TOTAL_DISTANCE) {
box.style.left = TOTAL_DISTANCE + "px";
clearInterval(box.timer);
}
}, 50);
}
}
今天就到这里，明天继续。
源码已上传至github, 需要的小伙伴可以去下载 https://github.com/17714574361/js-linear-motion_1
网友评论