如何使用css3实现一个类在线直播的队列动画

徐小夕 等级 694 0 0

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

  1. 使用javascript根据条件来控制元素的样式实现队列动画
  2. 用纯css3配合数据驱动模型来实现.

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

又由于动画的核心在于Css3, 所以在小程序或者是Vue/React中实现其实原理都是相似的, 大家不必担心技术栈的问题. 以下是实现后的效果图: 如何使用css3实现一个类在线直播的队列动画 如果以上gif无法访问, 可以查看下面的静态图: 如何使用css3实现一个类在线直播的队列动画

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

正文

要想实现上面的动画效果, 我们需要先分析一下动画, 上图的动画结构如下: 如何使用css3实现一个类在线直播的队列动画 动画一共分为以下两个过程:

  • 用户进入动画
  • 用户淡出动画

还有一个细节就是不管进入多少个用户, 都是从同一个位置进入的, 此时上一个用户位置会上移,如下图所示: 如何使用css3实现一个类在线直播的队列动画 所以要想实现这样的效果最好的方式就是使用定位,比如绝对定位(absolute)或者固定定位(fixed). 并设置其bottom值, 如下代码所示:

.animateWrap {
    position: absolute;
    bottom: 40%;
    left: 12px;
}

以上位置信息仅供参考,具体数值可根据自身需求来更改.设置bottom的好处是容器的子元素一旦增加, 会自动将上一个元素顶上去, 所以不需要我们手动去设置其偏移值.

实现进入动画

我们要想实现上图的用户进入动画, 可以使用Css3的过渡动画transition,也可以使用animation动画, 由于使用场景的便捷性这里我们采用animation动画, 首先我们先写一下dom结构:

 <div className={styles.animateWrap}>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
    <div className={styles.animate} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师上线</span></div>
  </div>

以上代码表示创建了一个动画容器, 并且添加了2个用户, 这里我们定义一下关键动画如下:

.animate {
      margin-bottom: 10px;
      border-radius: 20px;
      background-color: rgba(0,0,0, .3);
      animation: moveIn 1.2s;
    }
@keyframes moveIn {
  0% {
    transform: translateX(calc(-100% - 12px));
  }
  100% {
    transform: translateX(0);
  }
}

以上即实现了元素向右移入的动画, 但是此时我们看到的动画是同时出现的, 我们要应用到真实场景中, 一定是通过socket或者通过轮循拿到的异步数据, 因此我们可以使用setInterval来模拟这一过程. 还有一个细节是我们动画里最多只完整展示2条用户数据, 多余的数据会渐出隐藏, 因此我们需要对数据进行截流, 代码如下:

  const [user, setUser] = useState<Array<string>>([])
  useEffect(() => {
    let MAX_USER_COUNT = 2;
    let timer = setInterval(() => {
      setUser(prev => {
        prev.push(Date.now() + '')
        if(prev.length > MAX_USER_COUNT + 1){
          prev.shift()
          return [...prev]
        }else {
          return [...prev]
        }
      })
    }, 2000)
  }, [])

变量MAX_USER_COUNT用来控制最大展示的用户数,可以根据实际需求更改, setUser里面的逻辑即为截流逻辑, 当用户数超过指定的最大值时, 会将头部元素删除.

以上即完成了数据流转的过程, 我们还需要处理的是用户渐出逻辑和动画.我们先看看渐出的animation:

@keyframes moveOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

其实动画并不难, 我们需要控制的是如何给头部元素动态的添加这个动画, 此时我们最好的方案是通过类名, 即当满足渐出的条件时, 我们需要给渐出的元素动态设置渐出类名, 条件如下:

  • user.length > MAX_USER_COUNT && i === 0 以上条件指的是当用户数超过最大展示用户数并且当且元素为头部元素时, 那么我们只需要根据这个条件来动态设置类名即可:
    {
    user.map((item, i) => {
       return  <div className={classnames(styles.animate, user.length > 2 && i === 0 ? styles.hidden : '')} key={item}><div className={styles.tx}><img src={tx} alt=""/></div><span>李老师{item}上线</span></div>
    })
    }
    css代码如下:
    .hidden {
    opacity: 0;
    animation: moveOut 1.2s;
    }
    通过以上步骤我们就实现了一个完整的类在线直播的队列动画, 动画完整css代码如下, 感兴趣的盆友可以学习参考一下:
    .animateWrap {
      position: absolute;
      bottom: 40%;
      left: 12px;
      .animate {
        margin-bottom: 10px;
        border-radius: 20px;
        background-color: rgba(0,0,0, .3);
        animation: moveIn 1.2s;
        .tx {
          display: inline-block;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          vertical-align: middle;
          margin-right: 10px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        span {
          margin-right: 12px;
          line-height: 36px;
          font-size: 14px;
          color: #fff;
        }
      }
      .hidden {
        opacity: 0;
        animation: moveOut 1.2s;
      }
      @keyframes moveIn {
        0% {
          transform: translateX(calc(-100% - 12px));
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes moveOut {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    }

最后

如果想学习更多前端技能,实战学习路线, 欢迎在《趣谈前端》加入我们的技术群一起学习讨论,共同探索前端的边界。

更多推荐

收藏
评论区

相关推荐

用css3实现惊艳面试官的背景即背景动画(高级附源码
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体 开始 1.CSS
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特新实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
CSS3 RGBA
**CSS3 中的rgba中不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。** **RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。** **浏览器兼容性** **RG
CSS3 文本效果
CSS3 文本效果 --------- CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: * text-shadow * word-wrap * * * 浏览器支持 ----- ![](http://static.oschina.net/uploads/space/2016/0123/124344_Ps
CSS3动画(转自大神制作,很绚丽,纯CSS之作)
绚丽的3D动画(纯CSS实现,代码有点长啊,在这里不知道怎么折叠起来,讲究看看吧) 效果图:[https://bupt-hjm.github.io/css3-3d/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fbupt-hjm.github.io%2Fcss3-3d%2F)(转)
CSS3实现各种表情
 CSS3实现各种表情  效果图:  ![](https://oscimg.oschina.net/oscnet/3e7c1e03814ab2c1df6e3058e39715c9936.jpg)  代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></title
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
2016.07 第2周 群问题分享
![](https://oscimg.oschina.net/oscnet/d26128fec4f1a6ac6a9bebb574017bc764c.jpg) **HTML+CSS** ### 移动端中1px的边框如何实现 ![](https://oscimg.oschina.net/oscnet/502ef7f5ea07f51fee8ffef1ffc
CSS3 filter
作者:汪娇娇 日期:2016.10.9 其实之前几乎都没用过filter属性,就算知道也只是在脑中留了点浅浅的印象,直到最近因为项目的原因,才对filter进行了一个大致的学习。filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。不过现在大部分浏览器也都做了兼容性,下面大家就一起来学习吧。 现在规范中支持的效果有: *
CSS预编译器:Sass(入门),更快的前端开发
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
sublime常用插件以及自定义代码块
关于sublime的一些补充,如果你还不了解,可以先看这里:[认识sublime](https://my.oschina.net/yxmBetter/blog/828418) ### sublime常用插件列表 插件名称 功能 AutoFileName 根据 打开的文件 进行提示 BracketHighlighter 高亮 选中的括号 CSS