js_animation_B块和块碰撞及封装函数动画

碰撞检测 – 块与块

在学习块和块的碰撞之前，我们先来分析一下块相撞的条件：

两个块碰撞的交点，等于两个块分别为边缘到高和的一半和宽和的一半

当两个元素相撞时，那么中心点的距离，一定会小于两元素宽高和的一半

我们来编写一下：

1.这里先来定义编写的check_block_collision (block1,block2)

2.然后又加了一个div元素，通过div:nth-of-type(2)获取它

3.分别给div1和div2的speedX和speedY设置他们的运动像素

4.修改move函数中传入el参数，才可同时控制两个元素的移动，将move中的div全都改为el

5.修改check_border_collision(el)函数中的参数，将left和top中的设置的-1反方向运动前面都要加上el，使其分别控制每个元素的运动

6.在最后setInterval中将move(div1)和move(div2)分别调用

我们来看一下运行结果：

封装动画函数

1.要封装一个getStyle的函数，通过这个函数可以处理兼容性，来取得当前元素正在应用的样式。

2.另外，这个函数要实现的效果是最开始速度快，逐渐速度减小，最后速度为0时达到目的地；接着要把这个函数改变透明度、宽高、left、top这些值。

3.最后这个函数还要实现同时left和top都要改变多个元素来进行这个动画。

先来做一下水平由快到慢移动：

先来看js封装函数：

再来看从html中调用：

向左移动500个像素，运行效果如下：

以上就是我们的封装函数，当然这还没完，设置透明度动画：

这里注意，我们的animate只要调用一次，它就会设定一个setInterval

如果说调用多个animate对于同一个元素，就会有多个setInterval同时操作这个元素

也就是说这个元素的运动速度就会越来越快，要解决这个问题就要将setInterval进行清除

每一次进animate的时候，它都将前面的setInterval清掉

为了避免我们的id在出了animate之后被消除，我们可以将id放在el上：

el.timerId

这时候进来animate先来清除元素的timerId:

clearInterval(el.timerId);

那么下一次它就会有timerId的值，这时候再进入animate就会将前一个清掉并重新设定

这样就避免多次调用animate来改变同一个元素它会越来越快

现在大家注意，只是处理了有px单位的这几个属性

如果现在想要设定opacity，我们应该对opacity进行一个处理，进来的时候先判定，prpperty是不是opacity：

if(property === ‘opacity’){

current = Math.round(parseFloat(getStyle(el,’opacity’)) * 100);

//扩大100倍之后取整，是为了像下面普通元素一样计算

}else{

current = parseInt(getStyle(el,property));

}

同样在speed下面也要进行一下设置：

if(property === ‘opacity’){

el.style.opacity = (current + speed) / 100;

}else{

el.style[property] = current + speed + ‘px’;

}

再从html文件中将animate中参数为opacity

我们来看一下具体的代码和效果：

先来看js封装函数代码：

再来看html调用它的代码：

运行效果如下：

现在我们发现，它在改变的时候只能改变一个属性，那么怎么能让这个函数同时改变多个属性呢？

我们就应该在传递参数的时候传递多个参数，且在我们的处理中同时处理多个属性。

最方便的方式就是当调用animate的时候传递一个对象，这个对象左边的key是我们要改变的属性，而value是我们所要达到的某值。也就是说，我们要将后两个参数进行合并

即：function animate(el.properties){…}

接着在setInterval中，进行一个for循环

具体的封装函数、调用、效果如下：

先来看js封装代码：

再来看html调用代码：

运行效果如下：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web