這篇文章給大家分享的是有關怎么使用css3實現(xiàn)一個類在線直播的隊列動畫的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

公司主營業(yè)務：網(wǎng)站建設、網(wǎng)站設計、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出寧津免費做網(wǎng)站回饋大家。

之前在群里有個朋友問了這樣一個問題, 就是如何在小程序 中實現(xiàn)類似直播平臺 的用戶上線時的隊列動畫 ? 作為一名前端工程師, 解決方案無非以下2種:

• 使用javascript 根據(jù)條件來控制元素的樣式實現(xiàn)隊列動畫

• 用純css3 配合數(shù)據(jù)驅(qū)動模型來實現(xiàn).

大家都知道在現(xiàn)代的Web 開發(fā)中, 我們能使用Css 實現(xiàn)的效果盡量不要用Js , 所以我們應該優(yōu)先考慮用Css3 來實現(xiàn),但是我們要結(jié)合數(shù)據(jù)流 才能實現(xiàn)真正的隊列動畫, 所以我們可以利用MVVM框架 便捷的數(shù)據(jù)驅(qū)動模型來控制動畫的走向.

又由于動畫的核心在于Css3 , 所以在小程序 或者是Vue/React 中實現(xiàn)其實原理都是相似的, 大家不必擔心技術棧的問題. 以下是實現(xiàn)后的效果圖:

其實這種效果在很多地方都用到, 比如B站 的彈幕, 某音樂平臺直播的粉絲上線動畫, 某音的直播等等, 而在Web端 , 我們又能怎么實現(xiàn)它呢? 接下來筆者將帶大家一步步實現(xiàn)這樣的動畫效果.

正文

要想實現(xiàn)上面的動畫效果, 我們需要先分析一下動畫, 上圖的動畫結(jié)構如下:

動畫一共分為以下兩個過程:

• 用戶進入動畫

• 用戶淡出動畫

還有一個細節(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結(jié)構:

 <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ù)流轉(zhuǎn)的過程, 我們還需要處理的是用戶漸出邏輯和動畫.我們先看看漸出的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)一個類在線直播的隊列動畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：怎么使用css3實現(xiàn)一個類在線直播的隊列動畫-創(chuàng)新互聯(lián)
文章起源：http://chinadenli.net/article20/digcjo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、網(wǎng)站導航、建站公司、小程序開發(fā)、營銷型網(wǎng)站建設、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)