在很多页面或者是app上我们都能看到物体运动这个效果,现在随着css3的出现在其动画效果与过渡效果中都可以去实现。但是在一些时候用自己封装的运动效果在性能上可能更加的好。那么接下来就用js来实现一个物体匀速运动,加速运动,一个物体的单属性运动与多个物体的单属性运动,一个物体的所属性变化,链式的多属性变化的情况。
1.一个物体的匀速运动,具体的实现效果如下,当点击下面的按钮时,物体匀速运动到目标点后停止运动。
首先在样式上的布局,我们采用的是相对定位与绝对定位具体样式布局如下:
接着只需要我们将这个移动的方法绑定在这给按钮上即可。具体代码如下:
在上面的代码中实现的是物体匀加速与减速的过程,只需要在方法内部设置一个定时器,然后随着时间的改变就不停的去改变物体相对于父级的left值即可。在这里需要注意的是往左与往右运动时其取值的正负以及物体停止的条件,要使得其落在目标点位置就是在接近目标点时,手动的将其left设置成目标点的位置即可。如果不这样处理就会导致物体最终不会在目标点位置停下。
2.先加速快后加速慢,在这里我们需要了解到高中物体物理中所说的,物体做此运动需要满足的就是加速度逐渐减小时,直至到达目标点时停止即可。那么接下来就是看这个代码部分:
实现运动的原理也与上面运动改变的left值相同,不同的就是在于速度大小的实现上。每一次速度的大小不同,并且速度每次变化需要满足上面所说的先加速快后满的过程。
3.多个物体之间不同属性的变化与一个物体的多种属性混合变化,下面实现的效果就是点击这个按钮后实现这几个物体在长度,透明度,高度等样式上的变化效果之后的展示。
首先是在层级样式上的布局,这个很简单就不多说,下面就主要介绍在逻辑上的实现过程。首先就是将这个方法实现不同属性变化的方法绑定在这几个dom节点上。代码如下:
然后就是来实现这个startMove方法,在这个方法中我们需要传入三个参数,第一个就是需要改变属性的样式,第二改变后最后的样式,第三改变的是什么属性。首先来看下面的实现这个方法的代码:
在上面部分的代码中,我们需要设置两个初始变量iSpeed,iCurry,第一个表示移动的速度,后面表示改变的样式的目标值。那么接下来就是在定时器中不断的改变这个速度最终达到目标点即可。那么第二个问题就是在这当中我们要获取到当前改变的属性与属性值,因此在这里封装了getStyle()方法用于去实现这个功能。具体的封装方法如下: