前端实战:使用css3实现类在线直播的队列动画

一叶落而立秋

关注并将「趣谈前端」设为星标

每天定时分享技术干货/优秀开源/技术思维

之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画? 作为一名前端工程师, 解决方案无非以下2种:

1. 使用javascript根据条件来控制元素的样式实现队列动画

2. 用纯css3配合数据驱动模型来实现.

大家都知道在现代的Web开发中, 我们能使用Css实现的效果尽量不要用Js, 所以我们应该优先考虑用Css3来实现,但是我们要结合数据流才能实现真正的队列动画, 所以我们可以利用MVVM框架便捷的数据驱动模型来控制动画的走向.

又由于动画的核心在于Css3, 所以在小程序或者是Vue/React中实现其实原理都是相似的, 大家不必担心技术栈的问题. 以下是实现后的效果图:

如果以上gif无法访问, 可以查看下面的静态图:

其实这种效果在很多地方都用到, 比如B站的弹幕, 某音乐平台直播的粉丝上线动画, 某音的直播等等, 而在Web端, 我们又能怎么实现它呢? 接下来笔者将带大家一步步实现这样的动画效果.

正文

要想实现上面的动画效果, 我们需要先分析一下动画, 上图的动画结构如下:

动画一共分为以下两个过程:

• 用户进入动画

• 用户淡出动画

还有一个细节就是不管进入多少个用户, 都是从同一个位置进入的, 此时上一个用户位置会上移,如下图所示: