Js运动技术

运动基础

点击开始运动，让一个物体动起来：

改变方块的移动速度：1.可以改间隔时间，要注意的是可能会导致方块移动时一顿一顿的。

2.改变左边距offsetLeft的距离

 

这样写会让它无限制运动下去，想让它在某个地方停下：

但是当你多按几次开始运动的按钮后，等于是开了好几个定时器，那相当于30ms跑3*n px，所以我们在一开始先设一个关闭定时器：

 

运动框架

做一个分享到的例子：（合并前和合并后）

 

 

合并的要点：将两个功能中不同的常量设置成变量，通过赋值的方法来减少重复代码。

 

 

图片淡化的例子

 

缓冲运动

距离越大，速度越大，

距离越小，速度越小

控制缓冲的快慢就要改变speed中/后的数字，除的数字越大，缓冲越慢

但是这样写会发现一个问题，如果在left:300px处有一个参照物的话 ，很明显能看到方块在不到300px处就停下来了 ，

可以看到，此时的距离是291,速度是0.9，相当于此时的距离是291.9px 因为在css中，小数点部分都是舍去的，所以距离一直是291px没有动，这里就再插入一个知识点：

所以只要在speed处这样设置就行：

但是这个是方块从左向右运动，如果从右向左运动又会与300px有点差距，可以改成Math.floor，为了能让它随意向左向右运动，可以直接这样写：

 

注意：但凡用到缓冲运动，一定不要忘了取整

 

 

实例：缓冲菜单：

这个是让悬浮框在右下角的，如果想让悬浮框在右边的中间，只需要除以2

加了parseInt是取整，防止悬浮框一直抖动。