日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
前端實戰(zhàn)：使用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)后的效果圖:

如果以上gif無法訪問, 可以查看下面的靜態(tài)圖:

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

正文

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

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

  • 用戶進入動畫
  • 用戶淡出動畫

還有一個細節(jié)就是不管進入多少個用戶, 都是從同一個位置進入的, 此時上一個用戶位置會上移,如下圖所示:

所以要想實現(xiàn)這樣的效果最好的方式就是使用定位,比如絕對定位(absolute)或者固定定位(fixed). 并設置其bottom值, 如下代碼所示:

 
 
 
 
    
  
  
  
  
  1. .animateWrap { 
    2. 
  
  
  
  
  2.     position: absolute; 
    3. 
  
  
  
  
  3.     bottom: 40%; 
    4. 
  
  
  
  
  4.     left: 12px; 
    5. 
  
  
  
  
  5. } 
    6.

以上位置信息僅供參考,具體數(shù)值可根據(jù)自身需求來更改.設置bottom的好處是容器的子元素一旦增加, 會自動將上一個元素頂上去, 所以不需要我們手動去設置其偏移值.

實現(xiàn)進入動畫

我們要想實現(xiàn)上圖的用戶進入動畫, 可以使用Css3的過渡動畫transition,也可以使用animation動畫, 由于使用場景的便捷性這里我們采用animation動畫, 首先我們先寫一下dom結構:

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
李老師上線
 
  •     
    • 李老師上線
     
  •     
    • 李老師上線
     
  •   
    •  

    以上代碼表示創(chuàng)建了一個動畫容器, 并且添加了2個用戶, 這里我們定義一下關鍵動畫如下:

     
 
 
 
      
  
  
  
  
    1. .animate { 
      2. 
  
  
  
  
    2.       margin-bottom: 10px; 
      3. 
  
  
  
  
    3.       border-radius: 20px; 
      4. 
  
  
  
  
    4.       background-color: rgba(0,0,0, .3); 
      5. 
  
  
  
  
    5.       animation: moveIn 1.2s; 
      6. 
  
  
  
  
    6.     } 
      7. 
  
  
  
  
    7. @keyframes moveIn { 
      8. 
  
  
  
  
    8.   0% { 
      9. 
  
  
  
  
    9.     transform: translateX(calc(-100% - 12px)); 
      10. 
  
  
  
  
    10.   } 
      11. 
  
  
  
  
    11.   100% { 
      12. 
  
  
  
  
    12.     transform: translateX(0); 
      13. 
  
  
  
  
    13.   } 
      14. 
  
  
  
  
    14. } 
      15.

    以上即實現(xiàn)了元素向右移入的動畫, 但是此時我們看到的動畫是同時出現(xiàn)的, 我們要應用到真實場景中, 一定是通過socket或者通過輪循拿到的異步數(shù)據(jù), 因此我們可以使用setInterval來模擬這一過程. 還有一個細節(jié)是我們動畫里最多只完整展示2條用戶數(shù)據(jù), 多余的數(shù)據(jù)會漸出隱藏, 因此我們需要對數(shù)據(jù)進行截流, 代碼如下:

     
 
 
 
      
  
  
  
  
    1. const [user, setUser] = useState>([]) 
      2. 
  
  
  
  
    2.   useEffect(() => { 
      3. 
  
  
  
  
    3.     let MAX_USER_COUNT = 2; 
      4. 
  
  
  
  
    4.     let timer = setInterval(() => { 
      5. 
  
  
  
  
    5.       setUser(prev => { 
      6. 
  
  
  
  
    6.         prev.push(Date.now() + '') 
      7. 
  
  
  
  
    7.         if(prev.length > MAX_USER_COUNT + 1){ 
      8. 
  
  
  
  
    8.           prev.shift() 
      9. 
  
  
  
  
    9.           return [...prev] 
      10. 
  
  
  
  
    10.         }else { 
      11. 
  
  
  
  
    11.           return [...prev] 
      12. 
  
  
  
  
    12.         } 
      13. 
  
  
  
  
    13.       }) 
      14. 
  
  
  
  
    14.     }, 2000) 
      15. 
  
  
  
  
    15.   }, []) 
      16.

    變量MAX_USER_COUNT用來控制最大展示的用戶數(shù),可以根據(jù)實際需求更改, setUser里面的邏輯即為截流邏輯, 當用戶數(shù)超過指定的最大值時, 會將頭部元素刪除。

    以上即完成了數(shù)據(jù)流轉的過程, 我們還需要處理的是用戶漸出邏輯和動畫.我們先看看漸出的animation:

     
 
 
 
      
  
  
  
  
    1. @keyframes moveOut {   
      2. 
  
  
  
  
    2.   0% {    
      3. 
  
  
  
  
    3.    opacity: 1;   
      4. 
  
  
  
  
    4.   }   
      5. 
  
  
  
  
    5.   100% {     
      6. 
  
  
  
  
    6.     opacity: 0;   
      7. 
  
  
  
  
    7.   } 
      8. 
  
  
  
  
    8.  } 
      9.

    其實動畫并不難, 我們需要控制的是如何給頭部元素動態(tài)的添加這個動畫, 此時我們最好的方案是通過類名, 即當滿足漸出的條件時, 我們需要給漸出的元素動態(tài)設置漸出類名, 條件如下:

     
 
 
 
      
  
  
  
  
    1. user.length > MAX_USER_COUNT && i === 0 
      2.

    以上條件指的是當用戶數(shù)超過最大展示用戶數(shù)并且當且元素為頭部元素時, 那么我們只需要根據(jù)這個條件來動態(tài)設置類名即可:

     
 
 
 
      
  
  
  
  
    1. {  user.map((item, i) => { 
      2. 
  
  
  
  
    2.    return  
  
  
  
  
    3.              className={ 
      4. 
  
  
  
  
    4.                classnames(styles.animate,  
      5. 
  
  
  
  
    5.                  user.length > 2 && i === 0 ? styles.hidden : '') 
      6. 
  
  
  
  
    6.                }  
      7. 
  
  
  
  
    7.                key={item} 
      8. 
  
  
  
  
    8.             > 
      9. 
  
  
  
  
    9.                 
      10. 
  
  
  
  
    10.                   
      11. 
  
  
  
  
    11.                
     
  •                李老師{item}上線 
  •             
    •    
  •           }) 
  • } 

    • css代碼如下:

     
 
 
 
      
  
  
  
  
    1. hidden {  opacity: 0;  animation: moveOut 1.2s;} 
      2.

    通過以上步驟我們就實現(xiàn)了一個完整的類在線直播的隊列動畫, 動畫完整css代碼如下, 感興趣的盆友可以學習參考一下:

     
 
 
 
      
  
  
  
  
    1. animateWrap { 
      2. 
  
  
  
  
    2.     position: absolute; 
      3. 
  
  
  
  
    3.     bottom: 40%; 
      4. 
  
  
  
  
    4.     left: 12px; 
      5. 
  
  
  
  
    5.     .animate { 
      6. 
  
  
  
  
    6.       margin-bottom: 10px; 
      7. 
  
  
  
  
    7.       border-radius: 20px; 
      8. 
  
  
  
  
    8.       background-color: rgba(0,0,0, .3); 
      9. 
  
  
  
  
    9.       animation: moveIn 1.2s; 
      10. 
  
  
  
  
    10.       .tx { 
      11. 
  
  
  
  
    11.         display: inline-block; 
      12. 
  
  
  
  
    12.         width: 36px; 
      13. 
  
  
  
  
    13.         height: 36px; 
      14. 
  
  
  
  
    14.         border-radius: 50%; 
      15. 
  
  
  
  
    15.         overflow: hidden; 
      16. 
  
  
  
  
    16.         vertical-align: middle; 
      17. 
  
  
  
  
    17.         margin-right: 10px; 
      18. 
  
  
  
  
    18.         img { 
      19. 
  
  
  
  
    19.           width: 100%; 
      20. 
  
  
  
  
    20.           height: 100%; 
      21. 
  
  
  
  
    21.           object-fit: cover; 
      22. 
  
  
  
  
    22.         } 
      23. 
  
  
  
  
    23.       } 
      24. 
  
  
  
  
    24.       span { 
      25. 
  
  
  
  
    25.         margin-right: 12px; 
      26. 
  
  
  
  
    26.         line-height: 36px; 
      27. 
  
  
  
  
    27.         font-size: 14px; 
      28. 
  
  
  
  
    28.         color: #fff; 
      29. 
  
  
  
  
    29.       } 
      30. 
  
  
  
  
    30.     } 
      31. 
  
  
  
  
    31.     .hidden { 
      32. 
  
  
  
  
    32.       opacity: 0; 
      33. 
  
  
  
  
    33.       animation: moveOut 1.2s; 
      34. 
  
  
  
  
    34.     } 
      35. 
  
  
  
  
    35.     @keyframes moveIn { 
      36. 
  
  
  
  
    36.       0% { 
      37. 
  
  
  
  
    37.         transform: translateX(calc(-100% - 12px)); 
      38. 
  
  
  
  
    38.       } 
      39. 
  
  
  
  
    39.       100% { 
      40. 
  
  
  
  
    40.         transform: translateX(0); 
      41. 
  
  
  
  
    41.       } 
      42. 
  
  
  
  
    42.     } 
      43. 
  
  
  
  
    43.     @keyframes moveOut { 
      44. 
  
  
  
  
    44.       0% { 
      45. 
  
  
  
  
    45.         opacity: 1; 
      46. 
  
  
  
  
    46.       } 
      47. 
  
  
  
  
    47.       100% { 
      48. 
  
  
  
  
    48.         opacity: 0; 
      49. 
  
  
  
  
    49.       } 
      50. 
  
  
  
  
    50.     } 
      51. 
  
  
  
  
    51.   } 
      52.

    本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯(lián)系趣談前端公眾號。


    網(wǎng)站名稱：前端實戰(zhàn)：使用CSS3實現(xiàn)類在線直播的隊列動畫
    分享URL：http://www.5511xx.com/article/cdeppdc.html