跳動的音符動畫實現原理剖析

音視頻播放的時候總會遇到下面這種動效，如何實現呢？ 做動畫最重要的「拆分」，用電腦打開這張 gif，可以看到一幀一幀的圖片（圖片已上傳到 GitHub，文末有地址）。 動畫從第一幀開始，整體規律是從第 1 幀中的每個橫條高度勻速變化。先實現第 1 幀效果：我採用了 flex 佈局，可以非常方便地控制每個元素之間的間距，效果如下： 那麼如何讓第一個音符的高度通過動畫的形式變高再回到初始位置呢？也就是

>>阅读原文<<