js实现运动效果

                                                                              js实现运动效果

   在很多页面或者是app上我们都能看到物体运动这个效果，现在随着css3的出现在其动画效果与过渡效果中都可以去实现。但是在一些时候用自己封装的运动效果在性能上可能更加的好。那么接下来就用js来实现一个物体匀速运动，加速运动，一个物体的单属性运动与多个物体的单属性运动，一个物体的所属性变化，链式的多属性变化的情况。

1.一个物体的匀速运动，具体的实现效果如下，当点击下面的按钮时，物体匀速运动到目标点后停止运动。

 首先在样式上的布局，我们采用的是相对定位与绝对定位具体样式布局如下：

接着只需要我们将这个移动的方法绑定在这给按钮上即可。具体代码如下：

在上面的代码中实现的是物体匀加速与减速的过程，只需要在方法内部设置一个定时器，然后随着时间的改变就不停的去改变物体相对于父级的left值即可。在这里需要注意的是往左与往右运动时其取值的正负以及物体停止的条件，要使得其落在目标点位置就是在接近目标点时，手动的将其left设置成目标点的位置即可。如果不这样处理就会导致物体最终不会在目标点位置停下。

2.先加速快后加速慢，在这里我们需要了解到高中物体物理中所说的，物体做此运动需要满足的就是加速度逐渐减小时，直至到达目标点时停止即可。那么接下来就是看这个代码部分：

实现运动的原理也与上面运动改变的left值相同，不同的就是在于速度大小的实现上。每一次速度的大小不同，并且速度每次变化需要满足上面所说的先加速快后满的过程。

3.多个物体之间不同属性的变化与一个物体的多种属性混合变化，下面实现的效果就是点击这个按钮后实现这几个物体在长度，透明度，高度等样式上的变化效果之后的展示。

首先是在层级样式上的布局，这个很简单就不多说，下面就主要介绍在逻辑上的实现过程。首先就是将这个方法实现不同属性变化的方法绑定在这几个dom节点上。代码如下：

然后就是来实现这个startMove方法，在这个方法中我们需要传入三个参数，第一个就是需要改变属性的样式，第二改变后最后的样式，第三改变的是什么属性。首先来看下面的实现这个方法的代码：

在上面部分的代码中，我们需要设置两个初始变量iSpeed,iCurry，第一个表示移动的速度，后面表示改变的样式的目标值。那么接下来就是在定时器中不断的改变这个速度最终达到目标点即可。那么第二个问题就是在这当中我们要获取到当前改变的属性与属性值，因此在这里封装了getStyle()方法用于去实现这个功能。具体的封装方法如下：

在这个方法中采用的是一个兼容性的处理，兼容浏览器中获取样式的属性的方法，最后就会返回这个属性的属性值。然后在上面实现startMove()方法中，就是对属性的处理因为opacity与其他属性的属性值方式不同。因此就得有不同的处理过程。在处理opacity时，由于最开始我们将属性值的大小扩大了100倍。使得最后我们在处理的过程中也得将其缩小100倍。最后的处理方式就与最开始时物体做先加速快后加速慢的运动。最后就可以实现上面的效果了。

接下来就是实现一个物体多个属性的样式变化的效果，在这里我们想要实现一个链式调用的过程，当里面的所有目标属性达到目标点之后最终达到目标效果。首先就是在布局与样式上的代码部分：

在样式上也就不多说了，接着就是对于逻辑部分的代码功能上的实现。我们将要改变的属性及其目标值放在一个对象当中，然后在将其作为参数传入到这个移动的函数当中。当时在写这部分时，犯了一个命名上的错误，在下面的代码中有：

接着就是在事件上的绑定过程，代码如下：

其余剩余的内容就与之前的方法中代码相同具体如下：

在上面中需要仔细注意的就是我们使用for  in语句来遍历这个对象的内容然后再在内部实现整个的属性的改变。