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

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

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

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

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

每个音符的变化规则如下：

第 1 条音符：54-170-54；

第 2 条音符：140-54-140；

第 3 条音符：54-170-54；

第 4 条音符：170-54-170；

只要让他们循环改变高度即可。原理分析完后就需要找工具来实现。CSS 中提供了 animation 实现各种动画。在前端小课 第16天：领导说，体验差 讲了 CSS 中的动画，当时讲的并不细致，今天回头再学一学。一个 animation 属性由下面这些属性组成：

1、animation-name

这个属性用来指定动画的名称，也就是通过 @keyframes 定义的名称，例子中的 bounce。也可指定 none，表示无动画。

2、animation-duration

一个动画周期的时长，比如：0.5s 表示一个动画周期需要 0.5 秒；

3、animation-timing-function

每个动画周期内值改变时的规则，有很多值，比如 ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end，这个非常重要，动画效果的好坏与这个有很大关系。后面专门有一节内容讲这个属性。

4、animation-delay

要不要延迟执行，比如 1 个动画是在另一个动画开始后 2s 开始执行，可通过这个属性设置；

5、animation-iteration-count

动画执行几个周期，infinite 表示无限次数；

6、animation-direction

动画运动的方向，有下面几个关键字，通过第一个音符为例来说明，第一个音符的运动轨迹为（54 - 170 ）：

nomal：每一个动画周期都是从 54 到 170，运动到 170 后，会继续从 54 开始动画；

reverse：与 nomal 方向相反，从 170 到 54；

alternate：从 54 到 170，然后从 170 到 54，这正是我们本节例子想要的效果；

alternate-reverse：从 170 到 54，然后从 54 到 170；

7、animation-fill-mode

动画在最后一帧时的样式的表现形式，假如动画只执行一次，高度从 54 到 170，当动画结束时，应用动画的元素最终的高度是 54 还是 170，通过这个属性来控制的。有下面几个值：

forwards：使用动画结束的值，也就是动画结束后，高度为 170；

backwards：保留动画开始「之前」值，也就是动画结束后，高度任然为 54；

both：同时使用 forwards 和 backwards 规则；

8、animation-play-state

控制动画的播放状态，比如让一个动画暂停，有两个值：

pause：暂停动画执行；

running：让动画开始执行；

动画的使用方法掌握后可以实现我们的例子。各个元素的代码：

CSS 样式：定义各个元素的布局：

给每个元素添加动画：

关键帧定义：

运行上面的代码即可实现跳动的音符。动画效果的 demo 我上传到了：

https://github.com/lefex/FE/tree/master/animation/animation。

大家加油！

---

推荐阅读：

动画阶段 · 小程序向上弹出动画效果

学习前端的 7 个专题