跳动的音符动画实现原理剖析

音视频播放的时候总会遇到下面这种动效，如何实现呢？

做动画最重要的「拆分」，用电脑打开这张 gif，可以看到一帧一帧的图片（图片已上传到 GitHub，文末有地址）。

动画从第一帧开始，整体规律是从第 1 帧中的每个横条高度匀速变化。先实现第 1 帧效果：我采用了 flex 布局，可以非常方便地控制每个元素之间的间距，效果如下：

那么如何让第一个音符的高度通过动画的形式变高再回到初始位置呢？也就是高度的变化为（54-170-54），各个音符的高度如下：