Javascript中的运动可以分为好几类，也可以用运动框架，下面我们来详细的介绍js中的运动。
一、匀速运动
匀速运动在任何一个点的速度都是一样的。某元素要想实现在页面中的匀速运动，可以通过设置定时器，改变定位元素的left或者是top值就可。通过offsetLeft,offsetTop获取元素自身的实时位置，在自身位置的基础上，通过定时器的不断执行这样可以形成一个简单的匀速运动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width: 120px;height: 120px;background:red;position: absolute;left: 0;top:50px}
</style>
</head>
<body>
<script>
window.onload=function(){
var begin=document.getElementById('begin');
var reset=document.getElementById('reset');
var box=document.getElementById('box');
var timer;
begin.onclick=function(){
//在这里清除定时器是为了对定时器进行管理，以防元素在运动过程中多次按下按钮，开启多个定时器，使运动速度加快
clearInterval(timer);
timer=setInterval(function(){
if(box.offsetLeft<500){
box.style.left=box.offsetLeft+10+'px';
}else{
box.style.left='500';
clearInterval(timer);
}
},30)
}
reset.onclick=function(){
history.go();
}
}
</script>
<input type="button" id="begin" value='开始'>
<input type="button" id="reset" value="还原">
<div id="box"></div>
</body>
</html>
如果有多个元素要一起同时运动，这时我们要自定义定时器。如下文的obj.timer。每次运动开始清除自己身上的定时器而不是其它元素身上的定时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1, #box2 {width: 100px;height: 100px;background: #f00;position: absolute;left: 0; top: 50px;}
#box2 {top: 200px;}
</style>
</head>
<body>
<script>
window.onload=function(){
var btn=document.getElementById('btn');
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var timer;
//obj 谁运动 attr 属性 target 运动到哪
function move(obj,attr,target){
clearInterval(obj.timer); //一上来只清除自己身上的定时器，不会清除别人身上的定时器
obj.timer=setInterval(function(){
var value=parseInt(getComputedStyle(obj)[attr]); //获取到属性的值
value+=7; //让属性不断的加7，达到运动效果
//如果属性的值已经超过了目标了，要清除定时器，同时为了避免越界，要把它拉回来
if(value>=target){
clearInterval(timer);
value=target;
}
//修改元素的属性值
obj.style[attr]=value+'px';
},16)
};
//验证
btn.onclick=function(){
move(box1,'left',500);
move(box2,'left',400);
}
}
</script>
<Input type="button" id="btn" value="开始" />
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
二、tweenJS的使用
tween.js是一款可生成平滑动画效果的js动画库。它允许你修改元素的属性值。只需要告诉tween想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间这之类的信息，tween就可以产生平滑的动画效果。下面写了一个move函数，里面包含了tween.js。具体见下方代码：
<script>
/*
obj运动的对象,attr要运动的属性，target要运动到的目标
duration要运动的时间，fx运动的形式，callback 运动完成以后的调用的函数（非必要）
t : time 已过时间
b : begin 起始值
c : count 总的运动值
d : duration 持续时间
调用：
move(obj, {left:10,top:20,opacity:0.8}, duration, fx, callback)
第二个参数里用键值对的形式，值没有单位，opacity的值为0-1
*/
function move(obj, attrs, duration, fx, callback) {
clearInterval(obj.timer); //一上来清除定时器
var startTime = new Date().getTime();//记录开始的时间
var j = {};
for (var attr in attrs) { //用for in遍历
j[attr] = {}
j[attr].b = parseFloat(getComputedStyle(obj)[attr]); //起始位置
j[attr].c = attrs[attr] - j[attr].b; //c代表要运动的距离，要运动到的距离-起始的距离
}
var d = duration; //要运动的时间
//开启定时器
obj.timer = setInterval(function () {
var t = new Date().getTime() - startTime;//现在时间-已过时间=已过时间t
if (t >= d) {
t = d;
}
for (var attr in attrs) {
var b = j[attr].b;
var c = j[attr].c;
var value = Tween[fx](t, b, c, d); //距离
if (attr == 'opacity') {
obj.style[attr] = value;
} else {
obj.style[attr] = value + 'px';
}
}
//运动停止，清除定时器，再调callback，但调之前要看一下是否有callback
if (t == d) {
clearInterval(obj.timer);
if (typeof callback == 'function') {
callback.call(obj);
}
}
}, 16);
}
//调用Tween的方式 Tween.linear(t,b,c,d);
var Tween = {
linear: function (t, b, c, d) { //匀速
return c * t / d + b;
},
easeIn: function (t, b, c, d) { //加速曲线
return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) { //减速曲线
return -c * (t /= d) * (t - 2) + b;
},
easeBoth: function (t, b, c, d) { //加速减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
}
return -c / 2 * ((--t) * (t - 2) - 1) + b;
},
easeInStrong: function (t, b, c, d) { //加加速曲线
return c * (t /= d) * t * t * t + b;
},
easeOutStrong: function (t, b, c, d) { //减减速曲线
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeBothStrong: function (t, b, c, d) { //加加速减减速曲线
if ((t /= d / 2) < 1) {
return c / 2 * t * t * t * t + b;
}
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
},
elasticIn: function (t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
elasticOut: function (t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ((t /= d) == 1) {
return b + c;
}
if (!p) {
p = d * 0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
},
elasticBoth: function (t, b, c, d, a, p) {
if (t === 0) {
return b;
}
if ((t /= d / 2) == 2) {
return b + c;
}
if (!p) {
p = d * (0.3 * 1.5);
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else {
var s = p / (2 * Math.PI) * Math.asin(c / a);
}
if (t < 1) {
return - 0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
return a * Math.pow(2, -10 * (t -= 1)) *
Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
},
backIn: function (t, b, c, d, s) { //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
backOut: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
backBoth: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d / 2) < 1) {
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
}
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
},
bounceIn: function (t, b, c, d) { //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d - t, 0, c, d) + b;
},
bounceOut: function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
}
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
},
bounceBoth: function (t, b, c, d) {
if (t < d / 2) {
return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
}
</script>
下面要做一个轮播图无缝滚动的例子，具体见代码。
<body>
<script>
window.onload = function () {
var ul = document.querySelector('ul');
var div=document.querySelector('#box div');
var textArr = [
{ "title": '盛惠而来', "content": '京东携手天天果园百万车厘子，29元包邮畅想' },
{"title":'游园门票',"content":'奔跑吧周末游游园门票一元秒杀'},
{ "title": '老板购物节', "content": '2020我要更省，老板XX购物节精彩来袭' }
];
//复制一份ul
ul.innerHTML += ul.innerHTML;
var lis = document.querySelectorAll('li');
//一行显示图片让ul有足够的宽
var w = parseInt(getComputedStyle(lis[0]).width);
var n=0;//存储图片走的个数
var timer;
ul.style.width = w * lis.length + 'px';
//把文字添加到图片上
div.innerHTML='<h3>'+textArr[0].title+'</h3><p>'+textArr[0].content+'</p>'
//开启一个定时器让图片不断的走
timer=setInterval(pic,2000);
function pic(){
n++;//调一次函数意味着走了一张，就让它的值加1
//让文字运动到下面
move(div,{bottom:-70},500,'linear',function(){
//当文字已经运动消失了，这个时候要运动ul
move(ul,{left:-730*n},1000,'linear',function(){
//当图片停止了，需要去判断这张图是不是复制那个的第一张，如果是就要把ul马上拉回来
if(n==lis.length/2){
//当条件成立时，说明复制那个第一张已经走完
ul.style.left=0;
n=0;//n不用累加，要与图片对上
}
//在文字上去前要把内容改了
div.innerHTML='<h3>'+textArr[n].title+'</h3><p>'+textArr[n].content+'</p>'
//当ul走完一个后，这时需要让文字块移动上去
move(div,{bottom:0},500,'linear')
})
})
}
}
</script>
<div id="box">
<ul>
<li><img src="img2/1.jpg" alt="" /></li>
<li><img src="img2/2.jpg" alt="" /></li>
<li><img src="img2/3.jpg" alt="" /></li>
</ul>
<div>
<h3></h3>
<p></p>
</div>
</div>
</body>
