js_animation_A原理匀速及边缘碰撞

js原生动画的学习流程

js动画包括：

1.js动画原理：(1)匀速; (2)碰撞

2.动画函数封装：(1)getStyle; (2)减速 (3)透明度 (4)多属性

3.轮播：(1)透明度 (2)水平

我们来看一下加js动画和没有加js动画的区别：

没有加js动画：

加了js动画：

后者加了js动画的效果，只是将div进行1个像素1个像素的进行移动，所以我们肉眼看的就相对流畅。

匀速直线运动

运行结果如下：

我们来解析一下上面的例子：

碰撞检测 – 边缘

运行结果如下：

我们再来设置一下垂直碰撞：

运行结果如下：

但是目前还有一个小问题，就是在碰撞边缘时，右侧和底部会闪出滚动条

这个问题我们来解决一下：

只需要将body样式的overflow设置为hidden即可解决

运行结果如下：

以上就是元素和边缘之间的碰撞

当然碰撞不止这一种，我们下节继续