最近在抖音刷到渡一前端袁老师的一个视频，视频中袁老师用原生的 js 实现了钉钉官网的一个动画效果，我把这个视频看了很多遍，觉得实现这个效果特别能锻炼人的思维，在不依赖框架、第三方库的情况下，自己使用原生的 js 去实现一遍，对自己的提升会非常大，因此我也试着去实现该动画效果。

钉钉官网的动画效果如上，当然我这个只是实现了其中的一部分，其实其他的部分用一种思维都是可以实现的，由于时间关系，我只实现了下面的这部分：

我们仔细观察页面的滚动时可以发现，当列表的动画在播放的时候，我一直在滑动滚动条，但是列表区域是固定的，并不会往下滑，而当动画播放结束之后，列表区域才可以被带走，也就是要固定一块区域用于播放动画，我们先来看下页面的布局结构：

HTML结构：

playground （蓝色区域）的高度要尽可能大些，要留有足够的时间给列表区域播放动画；同时 animation-container （红色区域）要设置为粘性定位，当它的上边沿碰到其父元素 playground 时开始固定住，并播放动画，当它的下边沿碰到其父元素 playground 时的下边沿时动画播放结束，固定取消，随着滚动条的滚动，它会被父元素带走。样式代码如下：

动画区域以及布局结构、样式处理完之后，接下来该思考如何去实现动画

首先，我们要理解动画的本质，我个人的理解是 坐标系，横坐标是时间，纵坐标是某个值，也就是随着时间的变化，某个样式的值（透明度、偏移量...）在发生均匀的改变，可以看下下面的这张图，当然我这里的横坐标是 scroll （滚动的距离）

这里可以写一个函数来计算对应的值

由于列表中的每个元素的动画程度都不一样，因此需要准备一个 map 结构做映射：其中 key 为 dom 元素，value 为一个对象，里面是一些需要变化的样式，而且每个样式值都是一个函数，根据当前滚动条的位置设置不同的值：

监听页面的滚动事件，更新列表中每个 dom 元素的样式

关键是要搞定 animationMap，另外写个函数来进行处理，在页面挂载的时候调用一次

scrollStart、scrollEnd 分别表示滚动距离为多少时开始动画、结束动画，这两个值都需要进行一些计算，涉及到的距离比较多，大家可以自行画图来进行分析

getDomAnimation 方法也就是实现上面所说的 map 结构中的 value，其返回两个 函数，用于计算对于的样式属性值，整个过程中透明度（opacity）由 0 -> 1，放缩比例（scale）由 0.5 -> 1，这里比较难处理的是偏移量（translate），每个元素都会往中间靠（水平、垂直方向上）；由于每个元素这些属性值的变化不完全一样，因此需要给每个 dom 元素加个自定义属性 data-order，同时使动画具有对称性。

代码的话基本就完成了，下面我们看下最终的效果：

DingTalk.vue