每週一個前端動畫之五：B站視頻預覽動畫

春衫猶是，小蠻針線，曾溼西湖雨，轉眼來杭州已經小半年了，最憶是杭州，很喜歡的一個城市。由於換廠子的緣由，這個系列中斷了一段時間，是時候再次更新起來了。閒言少敘，開始咱們的正文。

本文分析實現的某些效果，僅僅做爲一個思路分享，僅僅做爲學習素材使用。

源動畫效果

在B站逛的時候發現一個小功能挺好玩的，當鼠標hover到卡片上的時候，能夠進行視頻的預覽。並且在卡片上移動鼠標的時候，預覽的位置能夠隨之改變。以下圖，能夠很直觀地觀察到效果：

實現分析

彈幕效果先略去，分析一下預覽效果的實現。看到上面的效果，咱們能夠想到在以前的的文章中用過的時間函數steps()，用這個函數實現了Twitter的點贊動畫。本文的效果能夠用相似的方式實現，可是有個區別是本文的預覽效果是根據鼠標的位置變化的，因此須要用到js進行輔助。大概的步驟實現能夠爲：

• 生成視頻的截圖，截圖按照相似精靈圖的方式按前後順序拼到一張圖片上
• 頁面根據當前鼠標的位置比例，肯定加載精靈圖的不一樣位置爲背景

代碼實現

這裏咱們不考慮如何生成視頻截圖和拼接，有不少工具能夠作，也能本身寫腳本實現。 先看一下最終得到的精靈圖片斷：

這裏將圖片設置爲背景，根據鼠標hover位置，修改背景圖的位置，僞代碼以下：

$(".card").mousemove(function (e) {
    $('.cover').css({
      backgroundImage: "url(./bg-mult.png)",
      backgroundPosition: x + "px " + y + "px",
      backgroundSize: size + "px"
    })
    $('.progress').css({
      width: progress + "%"
    })
  });
複製代碼

上面代碼中的x、y、size、progress是根據鼠標位置生成的背景圖片的位置信息，原理和代碼都很簡單，詳細的實現能夠看一下源碼，文末有連接。

效果展現

關鍵點解讀

實現的關鍵點在於如何將鼠標hover的相對位置，映射到對應的圖片背景位置上，能夠經過簡單的計算，設置背景位置，和精靈圖的用法基本一致。

代碼已上傳到github，歡迎提出Issues。

最後的慣例，貼上個人博客，歡迎關注