如何使用css3實現(xiàn)一個類在線直播的隊列動畫的示例代碼
我要評論之前在群里有個朋友問了這樣一個問題, 就是如何在 小程序 中實現(xiàn)類似 直播平臺 的用戶上線時的 隊列動畫 ? 作為一名前端工程師, 解決方案無非以下2種:
- 使用 javascript 根據(jù)條件來控制元素的樣式實現(xiàn)隊列動畫
- 用純 css3 配合數(shù)據(jù)驅動模型來實現(xiàn).
大家都知道在現(xiàn)代的 Web 開發(fā)中, 我們能使用 Css 實現(xiàn)的效果盡量不要用 Js , 所以我們應該優(yōu)先考慮用 Css3 來實現(xiàn),但是我們要結合 數(shù)據(jù)流 才能實現(xiàn)真正的隊列動畫, 所以我們可以利用 MVVM框架 便捷的數(shù)據(jù)驅動模型來控制動畫的走向.
又由于動畫的核心在于 Css3 , 所以在 小程序 或者是 Vue/React 中實現(xiàn)其實原理都是相似的, 大家不必擔心技術棧的問題. 以下是實現(xiàn)后的效果圖:
其實這種效果在很多地方都用到, 比如 B站 的彈幕, 某音樂平臺直播的粉絲上線動畫, 某音的直播等等, 而在 Web端 , 我們又能怎么實現(xiàn)它呢? 接下來筆者將帶大家一步步實現(xiàn)這樣的動畫效果.
正文
要想實現(xiàn)上面的動畫效果, 我們需要先分析一下動畫, 上圖的動畫結構如下:
動畫一共分為以下兩個過程:
- 用戶進入動畫
- 用戶淡出動畫
還有一個細節(jié)就是不管進入多少個用戶, 都是從同一個位置進入的, 此時上一個用戶位置會上移,如下圖所示:
所以要想實現(xiàn)這樣的效果最好的方式就是使用定位,比如絕對定位( absolute )或者固定定位( fixed ). 并設置其 bottom
值, 如下代碼所示:
.animateWrap {
position: absolute;
bottom: 40%;
left: 12px;
}
以上位置信息僅供參考,具體數(shù)值可根據(jù)自身需求來更改.設置 bottom 的好處是容器的子元素一旦增加, 會自動將上一個元素頂上去, 所以不需要我們手動去設置其偏移值.
實現(xiàn)進入動畫
我們要想實現(xiàn)上圖的用戶進入動畫, 可以使用 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>
以上代碼表示創(chuàng)建了一個動畫容器, 并且添加了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);
}
}
以上即實現(xiàn)了元素向右移入的動畫, 但是此時我們看到的動畫是同時出現(xiàn)的, 我們要應用到真實場景中, 一定是通過 socket 或者通過 輪循 拿到的異步數(shù)據(jù), 因此我們可以使用 setInterval 來模擬這一過程. 還有一個細節(jié)是我們動畫里最多只完整展示2條用戶數(shù)據(jù), 多余的數(shù)據(jù)會漸出隱藏, 因此我們需要對數(shù)據(jù)進行截流, 代碼如下:
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 用來控制最大展示的用戶數(shù),可以根據(jù)實際需求更改, setUser 里面的邏輯即為截流邏輯, 當用戶數(shù)超過指定的最大值時, 會將頭部元素刪除.
以上即完成了數(shù)據(jù)流轉的過程, 我們還需要處理的是用戶漸出邏輯和動畫.我們先看看漸出的 animation :
@keyframes moveOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
其實動畫并不難, 我們需要控制的是如何給頭部元素動態(tài)的添加這個動畫, 此時我們最好的方案是通過類名, 即當滿足漸出的條件時, 我們需要給漸出的元素動態(tài)設置漸出類名, 條件如下:
user.length > MAX_USER_COUNT && i === 0 以上條件指的是當用戶數(shù)超過最大展示用戶數(shù)并且當且元素為頭部元素時, 那么我們只需要根據(jù)這個條件來動態(tài)設置類名即可:
{
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;
}
通過以上步驟我們就實現(xiàn)了一個完整的類在線直播的隊列動畫, 動畫完整 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實現(xiàn)一個類在線直播的隊列動畫的示例代碼的文章就介紹到這了,更多相關css3在線直播隊列動畫內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了css3實現(xiàn)動畫的三種方式，幫助大家更好的理解和學習css3，感興趣的朋友可以了解下2020-08-24- 有好多小伙伴私聊我問我html5新特性 和用法，下面我給大家具體介紹一下html5都新加了哪些新特性，感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-13
使用html5新特性輕松監(jiān)聽任何App自帶返回鍵的示例
這篇文章主要介紹了使用html5新特性輕松監(jiān)聽任何App自帶返回鍵的示例的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-13- 這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下2018-02-02
- HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>，表示瀏覽器會按照標準模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標簽，感興趣的朋友一起看看吧2017-10-31
- HTML5想必大家都很熟悉了,因為太多的媒體在討論這一技術。所以當我們在面試前端工作的時候，遇到html5相關的問題一點也不意外，想要順利通過前端面試？下面這篇文章就來跟2017-09-05
這篇文章主要介紹了CSS3動畫和HTML5新特性詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-31
